@public-ui/sample-react 3.0.0-rc.9 → 3.0.1-3b313a0f2df6c512e868df86f443d016defc56fa.0

package/public/index.html

@@ -6,7 +6,17 @@
 		<meta name="description" content="Webapp demonstrating KolBri-components with React." />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<link rel="shortcut icon" type="image/x-icon" href="assets/kolibri.ico" />
+		<!-- We include all the important fonts in the index.html here so that they are available for the theme tests. -->
+		<link rel="stylesheet" href="assets/bundes/style.css" />
 		<link rel="stylesheet" href="assets/codicons/codicon.css" />
+		<link rel="stylesheet" href="assets/fontawesome-free/css/all.min.css" />
+		<link rel="stylesheet" href="assets/icofont/icofont.min.css" />
+		<link rel="stylesheet" href="assets/kreon/style.css" />
+		<link rel="stylesheet" href="assets/noto-sans/noto-sans.css" />
+		<link rel="stylesheet" href="assets/material-icons/iconfont/material-icons.css" />
+		<link rel="stylesheet" href="assets/material-symbols/index.css" />
+		<link rel="stylesheet" href="assets/roboto/roboto.css" />
+		<link rel="stylesheet" href="assets/tabler-icons/tabler-icons.css" />
 		<link rel="stylesheet" href="main.css" />
 		<meta name="robots" content="noindex" />
 		<meta name="kolibri" content="dev-mode=false;experimental-mode=true;" />

package/src/components/input-radio/horizontal.tsx

@@ -5,10 +5,10 @@ import { KolButton, KolForm, KolInputCheckbox, KolInputRadio } from '@public-ui/
 
 import { SampleDescription } from '../SampleDescription';
 
-import type { Orientation } from '@public-ui/components';
+import type { OrientationPropType } from '@public-ui/components';
 export const InputRadioHorizontal: FC = () => {
 	const [show, setShow] = useState(true);
-	const [orientation, setOrientation] = useState<Orientation>('horizontal');
+	const [orientation, setOrientation] = useState<OrientationPropType>('horizontal');
 
 	const options = [
 		{ label: 'Field 1', value: 1 },

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

@@ -27,7 +27,6 @@ export const InputRadioCases = forwardRef<HTMLKolInputRadioElement, Components.K
 			<KolInputRadio
 				{...props}
 				ref={ref}
-				_accessKey="A"
 				_orientation="horizontal"
 				_required
 				_value="Company"
@@ -68,18 +67,6 @@ export const InputRadioCases = forwardRef<HTMLKolInputRadioElement, Components.K
 				_label="Salutation (horizontal with error hint and description)"
 				_hint={HINT_MSG}
 			/>
-			<KolInputRadio
-				{...props}
-				_options="[{'disabled':true,'label':'Mrs. (disabled)','value':'Mrs.'},{'label':'Mr.'},{'label':'Company','value':'Company'}]"
-				_label="With access key"
-				_accessKey="c"
-			/>
-			<KolInputRadio
-				{...props}
-				_options="[{'disabled':true,'label':'Mrs. (disabled)','value':'Mrs.'},{'label':'Mr.'},{'label':'Company','value':'Company'}]"
-				_label="With short key"
-				_shortKey="s"
-			/>
 		</div>
 	);
 });

package/src/components/input-text/smart-button.tsx

@@ -3,30 +3,30 @@ import { SampleDescription } from '../SampleDescription';
 import { ToasterService } from '@public-ui/components';
 import { KolInputText } from '@public-ui/react';
 
+const smartButtonProps = {
+	_icons: 'codicon codicon-info',
+	_hideLabel: true,
+};
+
+const icons = {
+	left: {
+		icon: 'codicon codicon-arrow-left',
+	},
+	right: {
+		icon: 'codicon codicon-arrow-right',
+	},
+};
+
 export const InputTextSmartButton = () => {
 	const toaster = ToasterService.getInstance(document);
 
-	const smartButton = {
-		_icons: 'codicon codicon-info',
-		_hideLabel: true,
-		_label: 'Alert',
-		_on: {
-			onClick: () => {
-				void toaster.enqueue({
-					description: 'Smart-Button clicked',
-					label: `Toaster`,
-					type: 'default',
-				});
-			},
-		},
-	};
-
-	const icons = {
-		left: {
-			icon: 'codicon codicon-arrow-left',
-		},
-		right: {
-			icon: 'codicon codicon-arrow-right',
+	const handleClick = {
+		onClick: () => {
+			void toaster.enqueue({
+				description: 'Smart-Button clicked',
+				label: `Toaster`,
+				type: 'default',
+			});
 		},
 	};
 
@@ -37,9 +37,25 @@ export const InputTextSmartButton = () => {
 			</SampleDescription>
 
 			<div className="grid gap-4">
-				<KolInputText _label="With Smart Button" _type="text" _smartButton={smartButton}></KolInputText>
-				<KolInputText _label="With Smart Button (disabled)" _disabled _type="text" _smartButton={smartButton}></KolInputText>
-				<KolInputText _label="With Smart Button and Icons" _type="text" _smartButton={smartButton} _icons={icons}></KolInputText>
+				<KolInputText
+					_label="Input with button and icons"
+					_type="text"
+					_smartButton={{
+						...smartButtonProps,
+						_label: 'Open Toast',
+						_on: handleClick,
+					}}
+					_icons={icons}
+				></KolInputText>
+				<KolInputText
+					_label="Disabled input with button and without icons"
+					_disabled
+					_type="text"
+					_smartButton={{
+						...smartButtonProps,
+						_label: 'Disabled Button',
+					}}
+				></KolInputText>
 			</div>
 		</>
 	);

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

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react';
 
 import { KolSelect } from '@public-ui/react';
 
-import { ERROR_MSG } from '../../../shares/constants';
+import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 
 import type { Components, Optgroup, SelectOption, StencilUnknown } from '@public-ui/components';
 import { COUNTRY_OPTIONS } from '../../../shares/country';
@@ -71,6 +71,7 @@ export const SelectCases = forwardRef<HTMLKolSelectElement, Components.KolSelect
 				_multiple
 				_required
 				_msg={{ _type: 'error', _description: ERROR_MSG }}
+				_hint={HINT_MSG}
 				_touched
 			/>
 			<KolSelect {...props} _options={SALUTATION_OPTIONS} _label="With access key" _accessKey="c" />

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

@@ -31,6 +31,7 @@ export const SingleSelectCases = (props: Components.KolSingleSelect) => {
 				{...props}
 				_options={COUNTRY_OPTIONS as Option<StencilUnknown>[]}
 				_msg={{ _type: 'error', _description: ERROR_MSG }}
+				_rows={3}
 				_touched
 				_label="Label"
 				_placeholder="Placeholder"

package/src/components/toolbar/basic.tsx

@@ -1,10 +1,41 @@
 import type { FC } from 'react';
 import React, { useContext } from 'react';
-import { KolBadge, KolToolbar } from '@public-ui/react';
+import { KolBadge, KolHeading, KolToolbar } from '@public-ui/react';
 import { HideMenusContext } from '../../shares/HideMenusContext';
 import { SampleDescription } from '../SampleDescription';
 
 export const ToolbarBasic: FC = () => {
+	const TOOLBAR_ITEMS = [
+		{
+			_label: 'Back',
+			_hideLabel: true,
+			_icons: {
+				left: {
+					icon: 'codicon codicon-arrow-left',
+				},
+			},
+		},
+		{
+			_label: 'Next',
+			_hideLabel: true,
+			_icons: {
+				right: {
+					icon: 'codicon codicon-arrow-right',
+				},
+			},
+		},
+		{
+			_href: '#/back-page',
+			_label: 'Simple Link 1',
+		},
+		{
+			_href: '#/back-page',
+			_label: 'Simple Link 3',
+		},
+		{
+			_label: 'Bold',
+		},
+	];
 	const hideMenus = useContext(HideMenusContext);
 	return (
 		<>
@@ -16,41 +47,13 @@ export const ToolbarBasic: FC = () => {
 			</SampleDescription>
 			{!hideMenus && <KolBadge className="block mb-3" _label="Component is a DRAFT - Don't use in production yet." _color="#db5461" />}
 
-			<KolToolbar
-				class="block w-fit"
-				_label="Toolbar"
-				_items={[
-					{
-						_label: 'Back',
-						_hideLabel: true,
-						_icons: {
-							left: {
-								icon: 'codicon codicon-arrow-left',
-							},
-						},
-					},
-					{
-						_label: 'Next',
-						_hideLabel: true,
-						_icons: {
-							right: {
-								icon: 'codicon codicon-arrow-right',
-							},
-						},
-					},
-					{
-						_href: '#/back-page',
-						_label: 'Simple Link 1',
-					},
-					{
-						_href: '#/back-page',
-						_label: 'Simple Link 3',
-					},
-					{
-						_label: 'Bold',
-					},
-				]}
-			/>
+			<div className="flex flex-col gap-4">
+				<KolHeading _label="Orientation horizontal" _level={2} />
+				<KolToolbar class="block w-fit" _label="Toolbar" _items={TOOLBAR_ITEMS} />
+
+				<KolHeading _label="Orientation vertical" _level={2} />
+				<KolToolbar class="block w-fit" _label="Toolbar" _items={TOOLBAR_ITEMS} _orientation="vertical" />
+			</div>
 		</>
 	);
 };

package/src/react.main.tsx

@@ -77,6 +77,7 @@ void (async () => {
 					: undefined,
 				transformTagName: ENABLE_TAG_NAME_TRANSFORMER ? tagNameTransformer : undefined,
 				environment: process.env.NODE_ENV === 'development' ? 'development' : 'production',
+				reflectInputValues: true,
 			},
 		);
 

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

@@ -38,13 +38,15 @@ type Props = {
 };
 const Scenario = (props: Props) => {
 	const ref = useRef<HTMLStencilElement & { getValue: () => Promise<any> }>();
-	const [value, setValue] = useState<unknown>(undefined);
+	const [displayValue, setDisplayValue] = useState<unknown>(undefined);
+	const [modelValue, setModelValue] = useState<unknown>(props.inputProps._value);
 	const formatter = props.formatter || JSON.stringify;
 	const eventTarget = useContext(EventTargetContext);
 	const eventLoggerActive = useContext(EventLoggerActiveContext);
 
 	const handleButtonClick = async () => {
-		setValue(await ref.current?.getValue());
+		const value = await ref.current?.getValue();
+		setDisplayValue(value);
 	};
 
 	useEffect(() => {
@@ -65,6 +67,9 @@ const Scenario = (props: Props) => {
 				if (eventLoggerActive) {
 					console.log(props.inputProps._label, eventName, value, event);
 				}
+				if (eventName === 'onInput') {
+					setModelValue(value);
+				}
 			},
 		]),
 	);
@@ -72,7 +77,7 @@ 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} />
+				<props.InputComponent ref={ref} _on={eventListeners} {...props.inputProps} _value={modelValue} />
 				<KolButton
 					_label="getValue()"
 					_on={{
@@ -81,7 +86,7 @@ const Scenario = (props: Props) => {
 						},
 					}}
 				></KolButton>
-				<pre className="text-base">{formatter(value)}</pre>
+				<pre className="text-base">{formatter(displayValue)}</pre>
 			</div>
 		</>
 	);

package/src/scenarios/performance-test.tsx

@@ -0,0 +1,27 @@
+import { KolInputCheckbox, KolInputNumber, KolInputText } from '@public-ui/react';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../components/SampleDescription';
+
+const MAX_LENGTH = 333;
+const NUMBER_OF_INPUTS = new Array(MAX_LENGTH).fill(0).map((_, i) => i + 1);
+
+export const PerformanceTest: FC = () => {
+	return (
+		<>
+			<SampleDescription>
+				<p>This example renders many KoliBri components to show the performance.</p>
+			</SampleDescription>
+
+			<div className="w-full grid gap-4">
+				{NUMBER_OF_INPUTS.map((idx) => (
+					<div className="flex flex-wrap items-end gap-4" key={idx}>
+						<KolInputText _label={`TextInput #${idx}`} />
+						<KolInputNumber _label={`NumberInput #${idx}`} />
+						<KolInputCheckbox _label={`Checkbox #${idx}`} />
+					</div>
+				))}
+			</div>
+		</>
+	);
+};

package/src/scenarios/routes.ts

@@ -1,13 +1,14 @@
 import { Routes } from '../shares/types';
+import { ChangeTabindex } from './change-tabindex';
 import { CustomTooltipWidth } from './custom-tooltip-width';
 import { DisabledInteractiveElements } from './disabled-interactive-elements';
-import { InputsGetValue } from './inputs-get-value';
-import { StaticForm } from './static-form';
 import { FocusElements } from './focus-elements';
 import { TableHorizontalScrollAdvanced } from './horizontal-scrollbar-advanced';
 import { InputGroupWithError } from './input-group-with-error';
-import { ChangeTabindex } from './change-tabindex';
+import { InputsGetValue } from './inputs-get-value';
+import { PerformanceTest } from './performance-test';
 import { SameHeightOfAllInteractiveElements } from './same-height-of-all-interactive-elements';
+import { StaticForm } from './static-form';
 
 export const SCENARIO_ROUTES: Routes = {
 	scenarios: {
@@ -20,5 +21,6 @@ export const SCENARIO_ROUTES: Routes = {
 		'table-horizontal-scrollbar-advanced': TableHorizontalScrollAdvanced,
 		'change-tabindex': ChangeTabindex,
 		'same-height-of-all-interactive-elements': SameHeightOfAllInteractiveElements,
+		'performance-test': PerformanceTest,
 	},
 };

package/dist/1006.js

@@ -1,2 +0,0 @@
-/*! For license information please see 1006.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[1006],{1006:(n,t,e)=>{e.r(t),e.d(t,{kol_modal:()=>u});var o=e(5191),i=e(3694),a=e(3892),l=e(7763),r=e(5452),s=e(8045),d=e(3638),c=(n,t,e)=>new Promise(((o,i)=>{var a=n=>{try{r(e.next(n))}catch(n){i(n)}},l=n=>{try{r(e.throw(n))}catch(n){i(n)}},r=n=>n.done?o(n.value):Promise.resolve(n.value).then(a,l);r((e=e.apply(n,t)).next())}));const h=["blank","card"],u=class{constructor(n){(0,o.r)(this,n),this.on={onClick:()=>c(this,null,(function*(){yield this.closeModal()}))},this._label=void 0,this._on=void 0,this._width="100%",this._variant="blank",this.state={_label:"",_width:"100%"}}disconnectedCallback(){this.closeModal()}handleNativeCloseEvent(){var n,t;null===(t=null===(n=this.state._on)||void 0===n?void 0:n.onClose)||void 0===t||t.call(n),this.host&&(0,i.d)(this.host,i.K.close)}openModal(){return c(this,null,(function*(){var n;null===(n=this.refDialog)||void 0===n||n.showModal()}))}closeModal(){return c(this,null,(function*(){var n,t;null===(t=null===(n=this.refDialog)||void 0===n?void 0:n.close)||void 0===t||t.call(n)}))}render(){return(0,o.h)("dialog",{key:"a7746d9555c2d6e0172e184e370562e7bf7d8967",class:(0,s.c)("kol-modal",{"kol-modal__card":"card"===this.state._variant}),ref:n=>{this.refDialog=n},style:{width:this.state._width},"aria-label":this.state._label,onClose:this.handleNativeCloseEvent.bind(this)},(0,o.h)("div",{key:"af55fc367328cff9c1495518b39b92941101d9be",tabindex:"-1"},(0,o.h)("slot",{key:"e83efa707edf86463258ec35c174f2553a8405bf"})),"card"===this.state._variant&&(0,o.h)(l.a,{key:"234abb9a34c39e748a74471fb87595f9d144b994",class:"kol-modal__close-button","data-testid":"modal-close-button",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:(0,r.t)("kol-close"),_on:this.on,_tooltipAlign:"left"}))}validateLabel(n){(0,d.v)(this,n,{required:!0})}validateOn(n){if("object"==typeof n&&null!==n){const t={};"function"!=typeof n.onClose&&!0!==n.onClose||(t.onClose=n.onClose),(0,a.s)(this,"_on",t)}}validateWidth(n){(0,a.i)(this,"_width",n,{defaultValue:"100%"})}validateVariant(n){((n,t)=>{(0,a.w)(n,"_variant",(n=>"string"==typeof n&&h.includes(n)),new Set(h),t)})(this,n)}componentWillLoad(){this.validateLabel(this._label),this.validateOn(this._on),this.validateWidth(this._width),this.validateVariant(this._variant)}get host(){return(0,o.g)(this)}static get watchers(){return{_label:["validateLabel"],_on:["validateOn"],_width:["validateWidth"],_variant:["validateVariant"]}}};u.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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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    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: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\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%;\n    /* 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  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\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  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\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,\n  [disabled]:focus .kol-span {\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  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-modal {\n    border: 0;\n    padding: 0;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n  }\n  .kol-modal::backdrop {\n    background-color: rgba(0, 0, 0, 0.33);\n  }\n  .kol-modal__close-button {\n    position: absolute;\n    top: calc(1rem / var(--kolibri-root-font-size, 16));\n    right: calc(1rem / var(--kolibri-root-font-size, 16));\n    z-index: 1;\n  }\n}"}},3638:(n,t,e)=>{e.d(t,{a:()=>h,b:()=>r,c:()=>s,h:()=>i,v:()=>c});var o=e(3892);const i=[0,1,2,3,4,5,6],a=/[a-zA-Z0-9äöüÄÖÜß]/g,l=/^\d+$/;function r(n,t=1){return function(n){var t;return"string"==typeof n&&(null===(t=n.match(a))||void 0===t?void 0:t.length)||0}(n)>=t}function s(n){return l.test(n)}const d=new Set(["string"]),c=(n,t,e={})=>{(0,o.w)(n,"_label",(n=>"string"==typeof n),d,t,function(n){var t;return Object.assign(Object.assign({},n),{hooks:{afterPatch:(t,e,i,a)=>{var l,d;"function"==typeof(null===(l=n.hooks)||void 0===l?void 0:l.afterPatch)&&(null===(d=n.hooks)||void 0===d||d.afterPatch(t,e,i,a)),"string"==typeof t&&!1===r(t,3)&&!1===s(t)&&(0,o.a)(`The heading or label ("${t}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof t&&t.length>80&&(0,o.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(t=n.hooks)||void 0===t?void 0:t.beforePatch}})}(e))},h=c},3648:(n,t,e)=>{e.d(t,{b:()=>a,p:()=>o,s:()=>i});let o="development";try{o="production"}catch(n){o="production"}const i=n=>""===n,a=(n,t)=>n||t||""},5452:(n,t,e)=>{e.d(t,{t:()=>a});var o=e(4269),i=e(3648);let a=(n,t)=>{var e;return(null!==(e=(0,o.g)())&&void 0!==e?e:(0,o.i)("de")).translate(n,t)};"test"===i.p&&(a=n=>n)},8045:(n,t,e)=>{function o(n){var t,e,i="";if("string"==typeof n||"number"==typeof n)i+=n;else if("object"==typeof n)if(Array.isArray(n)){var a=n.length;for(t=0;t<a;t++)n[t]&&(e=o(n[t]))&&(i&&(i+=" "),i+=e)}else for(e in n)n[e]&&(i&&(i+=" "),i+=e);return i}function i(){for(var n,t,e=0,i="",a=arguments.length;e<a;e++)(n=arguments[e])&&(t=o(n))&&(i&&(i+=" "),i+=t);return i}e.d(t,{c:()=>i})}}]);

package/dist/1752.js

@@ -1,2 +0,0 @@
-/*! For license information please see 1752.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[1752],{343:(e,t,n)=>{n.d(t,{C:()=>r,a:()=>c,b:()=>d,g:()=>l});var i=n(5191),o=n(7763),s=n(5452),a=n(8045);const l=e=>{var t;const n="error"===(null===(t=e._msg)||void 0===t?void 0:t._type)&&!0===e._touched,i="string"==typeof e._hint&&e._hint.length>0,o=[];return!0===n&&o.push(`${e._id}-error`),!0===i&&o.push(`${e._id}-hint`),{hasMsg:n,hasHint:i,ariaDescribedBy:o}},r=({onClick:e,disabled:t})=>(0,i.h)("button",{tabindex:"-1",class:"kol-custom-suggestions-toggle",onClick:e,disabled:t},(0,i.h)(o.d,{_icons:"codicon codicon-triangle-down",_label:(0,s.t)("kol-dropdown")})),d=({index:e,ref:t,selected:n,onClick:o,onMouseOver:s,onFocus:a,onKeyDown:l,option:r})=>(0,i.h)("li",{id:`option-${e}`,key:`-${e}`,ref:t,"data-index":e,tabIndex:-1,role:"option","aria-selected":n?"true":void 0,onClick:o,onMouseOver:s,onFocus:a,class:"kol-custom-suggestions-option",onKeyDown:l},r),c=({blockSuggestionMouseOver:e,onKeyDown:t},n)=>(0,i.h)("ul",{role:"listbox",class:(0,a.c)("kol-custom-suggestions-options-group",{"kol-custom-suggestions-options-group--cursor-hidden":e}),onKeyDown:t},n)},1251:(e,t,n)=>{n.d(t,{v:()=>l});var i=n(3892),o=n(7125);const s=(e,t,n)=>{(0,o.b)(n)?e[t]=n:(0,o.i)(n,1)&&(e[t]={icon:n})},a=e=>"object"==typeof e&&null!==e&&(void 0===e.style||(0,o.a)(e.style))&&(void 0===e.label||(0,o.i)(e.label))&&(0,o.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,o.i)(e,1)||"object"==typeof e&&null!==e&&((0,o.i)(e.left,1)||a(e.left)||(0,o.i)(e.right,1)||a(e.right)||(0,o.i)(e.top,1)||a(e.top)||(0,o.i)(e.bottom,1)||a(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,a)=>{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,a)),(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,o.i)(e,1)?t={left:{icon:e}}:"object"==typeof e&&null!==e&&(s(t,"top",e.top),s(t,"right",e.right),s(t,"bottom",e.bottom),s(t,"left",e.left)),t})(t))}})(i)}}}))}))}},1476:(e,t,n)=>{function i(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}n.d(t,{i:()=>i})},1621:(e,t,n)=>{n.d(t,{K:()=>r,a:()=>l});var i=n(1111),o=n(5191),s=n(3299),a=n(9346);const l=e=>{var{id:t,suggestions:n}=e,s=(0,i._)(e,["id","suggestions"]);return n?(0,o.h)("datalist",Object.assign({id:`${t}-list`},s),n.map((e=>(0,o.h)("option",{value:e})))):null},r=e=>{var{state:t,customSuggestions:n}=e,r=(0,i._)(e,["state","customSuggestions"]);return(0,o.h)(a.K,Object.assign({},function(e,t){const{ariaDescribedBy:n}=(0,s.g)(e),i={id:e._id,hideLabel:e._hideLabel,label:e._label,accessKey:e._accessKey,disabled:e._disabled,name:e._name,ariaDescribedBy:n};return"_type"in e&&(i.type=e._type),"_value"in e&&(i.value=e._value),"_required"in e&&(i.required=e._required),"_maxLength"in e&&(i.maxlength=e._maxLength),"_placeholder"in e&&(i.placeholder=e._placeholder),"_autoComplete"in e&&(i.autoComplete=e._autoComplete),"_spellCheck"in e&&(i.spellcheck=e._spellCheck),"_pattern"in e&&(i.pattern=e._pattern),"_readOnly"in e&&(i.readonly=e._readOnly),"_min"in e&&(i.min=e._min),"_max"in e&&(i.max=e._max),"_step"in e&&(i.step=e._step),"_multiple"in e&&(i.multiple=e._multiple),"_checked"in e&&(i.checked=e._checked),"_indeterminate"in e&&(i.indeterminate=e._indeterminate),"_touched"in e&&(i.touched=e._touched),"_msg"in e&&(i.msg=(0,s.a)(e._msg)),"_suggestions"in e&&!t&&Array.isArray(e._suggestions)&&e._suggestions.length>0&&(i.suggestions=(0,o.h)(l,{id:e._id,suggestions:e._suggestions})),i}(t,n),r))}},1752:(e,t,n)=>{n.r(t),n.d(t,{kol_combobox:()=>g});var i=n(5191),o=n(8045),s=n(6943),a=n(8341),l=n(3892),r=n(2878),d=n(343),c=n(1621),h=n(3299),u=(e,t,n)=>new Promise(((i,o)=>{var s=e=>{try{l(n.next(e))}catch(e){o(e)}},a=e=>{try{l(n.throw(e))}catch(e){o(e)}},l=e=>e.done?i(e.value):Promise.resolve(e.value).then(s,a);l((n=n.apply(e,t)).next())}));class p extends a.I{constructor(e,t,n){super(e,t,n),this.component=e}validatePlaceholder(e){(0,l.i)(this.component,"_placeholder",e)}validateRequired(e){(0,l.b)(this.component,"_required",e)}validateSuggestions(e){(0,r.v)(this.component,e)}validateValue(e){(0,l.i)(this.component,"_value",e)}componentWillLoad(){super.componentWillLoad(),this.validatePlaceholder(this.component._placeholder),this.validateRequired(this.component._required),this.validateSuggestions(this.component._suggestions),this.validateValue(this.component._value)}}const g=class{getValue(){return u(this,null,(function*(){return this.state._value}))}kolFocus(){return u(this,null,(function*(){var e;null===(e=this.refInput)||void 0===e||e.focus()}))}selectOption(e){var t;this.controller.onFacade.onInput(new CustomEvent("input",{bubbles:!0,detail:{name:this.state._name,value:e}}),!0,e),this.controller.onFacade.onChange(new CustomEvent("change",{bubbles:!0,detail:{name:this.state._name,value:e}}),e),this.controller.setFormAssociatedValue(e),this.state._value=e,null===(t=this.refInput)||void 0===t||t.focus()}onInput(e){const t=e.target;this.state._value=t.value,this._value=t.value,this.controller.onFacade.onInput(e),this.setFilteredSuggestionsByQuery(t.value),this._focusedOptionIndex=-1}handleKeyDownDropdown(e){1===e.key.length&&/[a-z0-9]/i.test(e.key)&&(this._isOpen=!0,this.focusSuggestionStartingWith(e.key))}setFilteredSuggestionsByQuery(e){""===e.trim()?this._filteredSuggestions=[...this._suggestions]:(this._filteredSuggestions=Array.isArray(this._suggestions)?this._suggestions.filter((t=>t.toLowerCase().includes(e.toLowerCase()))):this._filteredSuggestions,this._isOpen=!!(this._filteredSuggestions&&this._filteredSuggestions.length>0))}moveFocus(e){if(!this._filteredSuggestions)return;let t=this._focusedOptionIndex+e;t>=this._filteredSuggestions.length&&(t=0),t<0&&(t=this._filteredSuggestions.length-1),this.focusOption(t)}focusOption(e){if(this._focusedOptionIndex=e,this.refSuggestions){const t=this.refSuggestions[e];null==t||t.focus()}}focusSuggestionStartingWith(e){const t=e.toLowerCase(),n=Array.isArray(this._filteredSuggestions)&&this._filteredSuggestions.length>0&&this._filteredSuggestions.findIndex((e=>e.toLowerCase().startsWith(t)));"number"==typeof n&&this.focusOption(n)}getFormFieldProps(){return{state:this.state,class:(0,o.c)("kol-combobox",{"has-value":this.state._hasValue}),tooltipAlign:this._tooltipAlign,onClick:()=>{var e;return null===(e=this.refInput)||void 0===e?void 0:e.focus()},alert:this.showAsAlert()}}getInputProps(){const{ariaDescribedBy:e}=(0,d.g)(this.state);return Object.assign(Object.assign({ref:this.catchRef,state:this.state,class:"kol-combobox__input",type:"text",role:"combobox","aria-autocomplete":"both","aria-expanded":this._isOpen?"true":"false","aria-controls":"listbox","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-labelledby":this.state._id,"aria-activedescendant":this._isOpen&&this._focusedOptionIndex>=0?`option-${this._focusedOptionIndex}`:void 0,value:this.state._value,accessKey:this.state._accessKey,autocapitalize:"off",autocorrect:"off",disabled:this.state._disabled,customSuggestions:!0,id:this.state._id,name:this.state._name,required:this.state._required},this.controller.onFacade),{onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1},onChange:this.onChange.bind(this),onInput:this.onInput.bind(this),placeholder:this.state._placeholder})}render(){return(0,i.h)(h.K,Object.assign({key:"6fdde2ff4b427627603d2d0b98623a97b2123047"},this.getFormFieldProps()),(0,i.h)(a.K,{key:"3d65851b2a307528b91616e6895a2fc1fd3d7d29",state:this.state},(0,i.h)("div",{key:"1ab1fc97818acb5b14ef1a294ff318736d45dfd4",class:"kol-combobox__group"},(0,i.h)(c.K,Object.assign({key:"1390396416c0595b33f8b4a11545224bfe755934"},this.getInputProps())),(0,i.h)(d.C,{key:"d51aa6d3e2dbfdfd1898cd739466061a0543fb00",onClick:this.toggleListbox.bind(this),disabled:this.state._disabled})),this._isOpen&&!(!0===this.state._disabled)&&(0,i.h)(d.a,{key:"863badfdbc37d4158cf3c60b3438bd11b7cee633",blockSuggestionMouseOver:this.blockSuggestionMouseOver,onKeyDown:this.handleKeyDownDropdown.bind(this)},Array.isArray(this._filteredSuggestions)&&this._filteredSuggestions.length>0&&this._filteredSuggestions.map(((e,t)=>(0,i.h)(d.b,{index:t,option:e,ref:e=>{e&&(this.refSuggestions[t]=e)},selected:this.state._value===e,onClick:()=>{this.selectOption(e),this.toggleListbox()},onMouseOver:()=>{this.blockSuggestionMouseOver||this.focusOption(t)},onFocus:()=>{this.focusOption(t)},onKeyDown:t=>{"Enter"!==t.key&&"NumpadEnter"!==t.key||(this.selectOption(e),this.toggleListbox(),t.preventDefault())}}))))))}handleKeyDown(e){var t,n;const i=(t,n)=>{var i;e.preventDefault(),void 0!==t&&(this._isOpen=t,t||null===(i=this.refInput)||void 0===i||i.focus()),null==n||n()};switch(e.key){case"Down":case"ArrowDown":this.blockSuggestionMouseOver=!0,i(!0,(()=>this.moveFocus(1)));break;case"Up":case"ArrowUp":this.blockSuggestionMouseOver=!0,i(!0,(()=>this.moveFocus(-1)));break;case"Tab":this._isOpen&&(this._isOpen=!this._isOpen,null===(t=this.refInput)||void 0===t||t.focus());break;case"Esc":case"Escape":this._hasOpened=!1,this._isOpen=!1,i(!1),null===(n=this.refInput)||void 0===n||n.focus();break;case"NumpadEnter":case"Enter":this.toggleListbox();break;case"Home":this.blockSuggestionMouseOver=!0,i(void 0,(()=>{this._isOpen&&this.focusOption(0)}));break;case"End":this.blockSuggestionMouseOver=!0,i(void 0,(()=>{this._isOpen&&this.focusOption(this._filteredSuggestions?this._filteredSuggestions.length-1:0)}));break;case"PageUp":this.blockSuggestionMouseOver=!0,i(void 0,(()=>this._isOpen&&this.moveFocus(-10)));break;case"PageDown":this.blockSuggestionMouseOver=!0,i(void 0,(()=>this._isOpen&&this.moveFocus(10)))}}handleWindowClick(e){null==this.host||this.host.contains(e.target)||(this._isOpen=!1)}constructor(e){(0,i.r)(this,e),this.refSuggestions=[],this._focusedOptionIndex=-1,this.toggleListbox=()=>{var e;if(!0===this.state._disabled)this._isOpen=!1;else if(null===(e=this.refInput)||void 0===e||e.focus(),!this._hasOpened&&Array.isArray(this._filteredSuggestions)&&this._filteredSuggestions.length>0){this._isOpen=!0,this._hasOpened=!0;const e=this._filteredSuggestions.findIndex((e=>e===this.state._value));this._focusedOptionIndex=e>=0?e:-1,this.focusOption(this._focusedOptionIndex)}},this.catchRef=e=>{this.refInput=e},this.blockSuggestionMouseOver=!1,this._isOpen=!1,this._filteredSuggestions=void 0,this._hasOpened=!1,this._accessKey=void 0,this._placeholder=void 0,this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._suggestions=void 0,this._required=!1,this._shortKey=void 0,this._syncValueBySelector=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hasValue:!1,_hideMsg:!1,_id:`id-${(0,s.n)()}`,_label:"",_suggestions:[],_value:""},this.inputHasFocus=!1,this.controller=new p(this,"combobox",this.host),this.onInput=this.onInput.bind(this)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(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)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSuggestions(e){this.controller.validateSuggestions(e),this._filteredSuggestions=e}validateRequired(e){this.controller.validateRequired(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e),this.controller.setFormAssociatedValue(e)}componentWillLoad(){this.refSuggestions=[],this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((e=>this.state._hasValue=!!e)),this._filteredSuggestions=this.state._suggestions}handleMouseEvent(){this.blockSuggestionMouseOver=!1}handleFocusOut(){setTimeout((()=>{var e;(null===(e=this.host)||void 0===e?void 0:e.contains(document.activeElement))||this.onBlur()}),0)}handleWindowBlur(){this.onBlur()}onBlur(){var e;this._hasOpened=!1,this._isOpen&&(this._isOpen=!this._isOpen,null===(e=this.refInput)||void 0===e||e.focus())}onChange(e){this.controller.onFacade.onChange(e),this.controller.setFormAssociatedValue(this.state._value)}static get delegatesFocus(){return!0}get host(){return(0,i.g)(this)}static get watchers(){return{_placeholder:["validatePlaceholder"],_accessKey:["validateAccessKey"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_shortKey:["validateShortKey"],_suggestions:["validateSuggestions"],_required:["validateRequired"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"]}}};g.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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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    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: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\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%;\n    /* 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  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\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  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\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,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-custom-suggestions-option {\n    cursor: pointer;\n    white-space: normal;\n    overflow-wrap: break-word;\n    word-wrap: break-word;\n    line-height: 1.5;\n    box-sizing: border-box;\n  }\n  .kol-custom-suggestions-options-group--cursor-hidden .kol-custom-suggestions-option {\n    cursor: none !important;\n  }\n}\n@layer kol-component {\n  .kol-custom-suggestions-options-group {\n    display: block;\n    position: absolute;\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n    overflow-y: auto;\n    overflow-x: hidden;\n    z-index: 2;\n    background-color: white;\n    max-height: calc(250rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-custom-suggestions-toggle {\n    align-items: center;\n    display: flex;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-custom-suggestions-toggle:not(:disabled) {\n    cursor: pointer;\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}"}},2757:(e,t,n)=>{n.d(t,{K:()=>s});var i=n(5191),o=n(7763);const s=e=>{const{class:t,style:n,icons:s,label:a,onClick:l}=e;return(0,i.h)(o.d,{class:t,style:n,onClick:l,_icons:s,_label:a})}},2878:(e,t,n)=>{n.d(t,{v:()=>o});var i=n(3892);const o=(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.")}}})}},8341:(e,t,n)=>{n.d(t,{I:()=>f,K:()=>v,a:()=>m});var i=n(5191),o=n(8933),s=n(1476),a=n(1111),l=n(7763),r=n(2757),d=n(8045),c=n(3299),h=n(1251);const u=(e,t)=>{var{position:n="start",class:o}=e,s=(0,a._)(e,["position","class"]);const l="kol-input-container__adornment",r=`${l}--${n}`;return(0,i.h)("div",Object.assign({class:(0,d.c)(l,r,o)},s),t)};function p(e){return!!e&&(Array.isArray(e)?e.length>0:Boolean(e))}const g=(e,t)=>{var{class:n}=e,o=(0,a._)(e,["class"]);return(0,i.h)("div",Object.assign({class:(0,d.c)("kol-input-container__container",n)},o),t)},b=(e,t)=>{const{class:n,startAdornment:o,endAdornment:s,disabled:l,msg:r,touched:h,containerProps:b,startAdornmentProps:_,endAdornmentProps:m}=e,v=(0,a._)(e,["class","startAdornment","endAdornment","disabled","msg","touched","containerProps","startAdornmentProps","endAdornmentProps"]),f=(0,c.c)(r,h),y={"kol-input-container--disabled":l,[`kol-input-container--${(null==r?void 0:r.type)||"error"}`]:f},k=Object.assign({class:(0,d.c)("kol-input-container",y,n)},v);return p(o)||p(s)?(0,i.h)("div",Object.assign({},k),(0,i.h)(u,Object.assign({},_,{position:"start"}),o),(0,i.h)(g,Object.assign({},b),t),(0,i.h)(u,Object.assign({},m,{position:"end"}),s)):(0,i.h)("div",Object.assign({},k),(0,i.h)(g,Object.assign({},b),t))},_=e=>{const{label:t,icons:n,hideLabel:o,disabled:s,onClick:r}=e,d=(0,a._)(e,["label","icons","hideLabel","disabled","onClick"]);return(0,i.h)(l.a,Object.assign({_label:t,_disabled:s,_icons:n,_hideLabel:o,_on:{onClick:r}},d))},m=e=>{const{componentName:t="button",label:n,icon:o,onClick:s}=e,l=(0,a._)(e,["componentName","label","icon","onClick"]),d="button"===t?_:r.K;return(0,i.h)(d,Object.assign({label:n||"",hideLabel:!0,icons:`codicon codicon-${o}`,onClick:s},l))},v=({state:e,endAdornment:t},n)=>{const{icons:a,smartButton:l,disabled:r,msg:d,touched:h}=function(e){let t,n;return"_icons"in e&&(t=e._icons),"_smartButton"in e&&(n=e._smartButton),{icons:t,smartButton:n,disabled:e._disabled,msg:(0,c.a)(e._msg),touched:e._touched}}(e);let u=null==a?void 0:a.left;(0,o.i)(u)&&(u={icon:u});let p=null==a?void 0:a.right;(0,o.i)(p)&&(p={icon:p});const g=[],_=[];return t&&(Array.isArray(t)?_.push(...t):_.push(t)),u&&g.push((0,i.h)(m,Object.assign({componentName:"icon",class:"kol-input-container__icon"},(0,s.i)(u)?u:{}))),(0,s.i)(l)&&_.push((0,i.h)(m,Object.assign({componentName:"button",class:"kol-input-container__smart-button"},l,{hideLabel:!0,disabled:r}))),p&&_.push((0,i.h)(m,Object.assign({componentName:"icon",class:"kol-input-container__icon"},(0,s.i)(p)?p:{}))),(0,i.h)(b,{disabled:r,msg:d,touched:h,startAdornment:g,endAdornment:_},n)};class f extends c.I{constructor(e,t,n){super(e,t,n),this.component=e}validateIcons(e){(0,h.v)(this.component,e)}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons)}}},9346:(e,t,n)=>{n.d(t,{K:()=>l});var i=n(1111),o=n(5191),s=n(8045),a=n(3299);const l=e=>{const{class:t,msg:n,required:l,disabled:r,touched:d,readonly:c,ariaDescribedBy:h,hideLabel:u,label:p,suggestions:g,value:b}=e,_=(0,i._)(e,["class","msg","required","disabled","touched","readonly","ariaDescribedBy","hideLabel","label","suggestions","value"]),m=(0,a.c)(n,d),v={"kol-input--disabled":Boolean(r),"kol-input--required":Boolean(l),"kol-input--touched":Boolean(d),"kol-input--readonly":Boolean(c),[`kol-input--${(null==n?void 0:n.type)||"error"}`]:m},f=Object.assign(Object.assign({class:(0,s.c)("kol-input",v,t),required:l,disabled:r,readonly:c,type:"text",list:g?`${_.id}-list`:void 0},(0,a.f)({ariaDescribedBy:h,hideLabel:u,label:p})),_);return(0,o.h)(o.F,null,(0,o.h)("input",Object.assign({},f,{value:b})),g)}}}]);

package/dist/1932.js

@@ -1,2 +0,0 @@
-/*! For license information please see 1932.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[1932],{1932:(n,e,t)=>{t.r(e),t.d(e,{kol_abbr:()=>a});var o=t(5191),i=t(3638);const a=class{constructor(n){(0,o.r)(this,n),this._label=void 0,this.state={_label:""}}render(){return(0,o.h)(o.H,{key:"8267aa3e74d7eaa360974c5d574061ef207f2b79",class:"kol-abbr"},(0,o.h)("abbr",{key:"cc15d83f035241891e2c44fe7401501dae83c15e"},(0,o.h)("slot",{key:"2a655a6e8c1dbae8377bd8175cd83189b0b00483"})),this.state._label?` (${this.state._label})`:"")}validateLabel(n){(0,i.v)(this,n,{required:!0})}componentWillLoad(){this.validateLabel(this._label)}static get watchers(){return{_label:["validateLabel"]}}};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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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    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: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\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%;\n    /* 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  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\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  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\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,\n  [disabled]:focus .kol-span {\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  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-abbr {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}"}},3638:(n,e,t)=>{t.d(e,{a:()=>h,b:()=>r,c:()=>s,h:()=>i,v:()=>c});var o=t(3892);const i=[0,1,2,3,4,5,6],a=/[a-zA-Z0-9äöüÄÖÜß]/g,l=/^\d+$/;function r(n,e=1){return function(n){var e;return"string"==typeof n&&(null===(e=n.match(a))||void 0===e?void 0:e.length)||0}(n)>=e}function s(n){return l.test(n)}const d=new Set(["string"]),c=(n,e,t={})=>{(0,o.w)(n,"_label",(n=>"string"==typeof n),d,e,function(n){var e;return Object.assign(Object.assign({},n),{hooks:{afterPatch:(e,t,i,a)=>{var l,d;"function"==typeof(null===(l=n.hooks)||void 0===l?void 0:l.afterPatch)&&(null===(d=n.hooks)||void 0===d||d.afterPatch(e,t,i,a)),"string"==typeof e&&!1===r(e,3)&&!1===s(e)&&(0,o.a)(`The heading or label ("${e}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof e&&e.length>80&&(0,o.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(e=n.hooks)||void 0===e?void 0:e.beforePatch}})}(t))},h=c}}]);

package/dist/2069.js

@@ -1,2 +0,0 @@
-/*! For license information please see 2069.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[2069],{2069:(t,a,e)=>{e.r(a),e.d(a,{kol_avatar_wc:()=>o});var r=e(5191),s=e(5452),l=e(7826),i=e(3638);const n=t=>0===t.length?"":t[0].toUpperCase(),o=class{constructor(t){(0,r.r)(this,t),this._src=void 0,this._label=void 0,this.state={_src:"",_label:""}}render(){return(0,r.h)("div",{key:"b9ad63a1fb9190d47524deae8e59a00d2a14fa83","aria-label":(0,s.t)("kol-avatar-alt",{placeholders:{name:this.state._label}}),class:"kol-avatar",role:"img"},this.state._src?(0,r.h)("img",{alt:"","aria-hidden":"true",class:"kol-avatar__image",src:this.state._src}):(0,r.h)("span",{"aria-hidden":"true",class:"kol-avatar__initials"},(t=>{const a=t.split(/\s+/),e=a.at(0),r=a.at(-1);return a.length>=2&&e&&r?`${n(e)}${n(r)}`:n(t)})(this.state._label.trim())))}validateSrc(t){(0,l.v)(this,t)}validateLabel(t){(0,i.v)(this,t,{required:!0})}componentWillLoad(){this.validateSrc(this._src),this.validateLabel(this._label)}static get watchers(){return{_src:["validateSrc"],_label:["validateLabel"]}}}},3638:(t,a,e)=>{e.d(a,{a:()=>d,b:()=>n,c:()=>o,h:()=>s,v:()=>h});var r=e(3892);const s=[0,1,2,3,4,5,6],l=/[a-zA-Z0-9äöüÄÖÜß]/g,i=/^\d+$/;function n(t,a=1){return function(t){var a;return"string"==typeof t&&(null===(a=t.match(l))||void 0===a?void 0:a.length)||0}(t)>=a}function o(t){return i.test(t)}const c=new Set(["string"]),h=(t,a,e={})=>{(0,r.w)(t,"_label",(t=>"string"==typeof t),c,a,function(t){var a;return Object.assign(Object.assign({},t),{hooks:{afterPatch:(a,e,s,l)=>{var i,c;"function"==typeof(null===(i=t.hooks)||void 0===i?void 0:i.afterPatch)&&(null===(c=t.hooks)||void 0===c||c.afterPatch(a,e,s,l)),"string"==typeof a&&!1===n(a,3)&&!1===o(a)&&(0,r.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,r.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(a=t.hooks)||void 0===a?void 0:a.beforePatch}})}(e))},d=h},3648:(t,a,e)=>{e.d(a,{b:()=>l,p:()=>r,s:()=>s});let r="development";try{r="production"}catch(t){r="production"}const s=t=>""===t,l=(t,a)=>t||a||""},5452:(t,a,e)=>{e.d(a,{t:()=>l});var r=e(4269),s=e(3648);let l=(t,a)=>{var e;return(null!==(e=(0,r.g)())&&void 0!==e?e:(0,r.i)("de")).translate(t,a)};"test"===s.p&&(l=t=>t)},7826:(t,a,e)=>{e.d(a,{v:()=>s});var r=e(3892);const s=(t,a,e)=>{(0,r.i)(t,"_src",a,e)}}}]);

package/dist/2212.js

@@ -1,2 +0,0 @@
-/*! For license information please see 2212.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[2212],{2212:(n,t,e)=>{e.r(t),e.d(t,{kol_split_button:()=>l});var o=e(5191),i=e(5452),a=e(7763),s=e(8045);const l=class{constructor(n){(0,o.r)(this,n),this.clickButtonHandler={onClick:n=>{var t,e;n.stopPropagation(),"function"==typeof(null===(t=this._on)||void 0===t?void 0:t.onClick)?null===(e=this._on)||void 0===e||e.onClick(n,this._value):this.toggleDropdown()}},this.clickToggleHandler={onClick:n=>{n.stopPropagation(),this.toggleDropdown()}},this.toggleDropdown=()=>{this.state=Object.assign(Object.assign({},this.state),{_show:!this.state._show})},this.handleOnClose=()=>{this.state=Object.assign(Object.assign({},this.state),{_show:!1})},this._ariaControls=void 0,this._ariaExpanded=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icons=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._role=void 0,this._syncValueBySelector=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal",this.state={_show:!1}}render(){const n="kol-split-button-dropdown-label";return(0,o.h)("div",{key:"0c88a85fb8276e85ec24cb2e4c6d5b4ea5f4def5",class:"kol-split-button"},(0,o.h)("div",{key:"dc3714e07c2520223c2b8cad45898e9815282681",class:"kol-split-button__root"},(0,o.h)(a.a,{key:"b7f61444b57f22216b4614c2a713c33585183ba1",class:(0,s.c)("kol-split-button__button",{[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0}),_ariaControls:this._ariaControls,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_icons:this._icons,_hideLabel:this._hideLabel,_label:this._label,_name:this._name,_on:this.clickButtonHandler,_role:this._role,_syncValueBySelector:this._syncValueBySelector,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant}),(0,o.h)("div",{key:"fcb8212ab113127e25ebea6b1b69e90fa2c767ae",class:"kol-split-button__horizontal-line"}),(0,o.h)(a.a,{key:"81fe77362ce48e18fa23d20c6801a8d2cd224a15",class:"kol-split-button__secondary-button",_disabled:this._disabled,_hideLabel:!0,_icons:"codicon codicon-triangle-down",_label:this.state._show?(0,i.t)(`${n}-close`):(0,i.t)(`${n}-open`),_on:this.clickToggleHandler})),(0,o.h)(a.k,{key:"a70171de4785124fec0f53ece004864f1ef0d2f7",_show:this.state._show,_on:{onClose:this.handleOnClose},_align:"bottom"},(0,o.h)("slot",{key:"9ce7ea4b4157712fed4b866c18f50842fbd83704"})))}closePopup(){return n=this,t=function*(){return this.handleOnClose(),Promise.resolve()},new Promise(((e,o)=>{var i=n=>{try{s(t.next(n))}catch(n){o(n)}},a=n=>{try{s(t.throw(n))}catch(n){o(n)}},s=n=>n.done?e(n.value):Promise.resolve(n.value).then(i,a);s((t=t.apply(n,null)).next())}));var n,t}static get delegatesFocus(){return!0}};l.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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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    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: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\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%;\n    /* 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  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\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  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\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,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-popover {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    height: 0;\n    position: absolute;\n  }\n  .kol-popover__content {\n    background-color: #fff;\n    min-height: max-content;\n    min-width: max-content;\n    opacity: 0;\n    position: absolute;\n  }\n  .kol-popover__content--visible {\n    animation: 0.3s ease-in forwards fadeInOpacity;\n  }\n  .kol-popover__content--disappear {\n    animation: 0.3s ease-in backwards fadeInOpacity;\n  }\n  .kol-popover__arrow {\n    background-color: inherit;\n    height: var(--font-size);\n    position: absolute;\n    rotate: 0.125turn;\n    width: var(--font-size);\n    z-index: -1;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-split-button {\n    display: flex;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n  }\n  .kol-split-button__root {\n    display: flex;\n    position: relative;\n  }\n  .kol-split-button__button {\n    flex-grow: 1;\n    text-align: left;\n  }\n  .kol-split-button .kol-popover__content {\n    margin-top: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-split-button .kol-popover__arrow {\n    display: none;\n  }\n}"}},3648:(n,t,e)=>{e.d(t,{b:()=>a,p:()=>o,s:()=>i});let o="development";try{o="production"}catch(n){o="production"}const i=n=>""===n,a=(n,t)=>n||t||""},5452:(n,t,e)=>{e.d(t,{t:()=>a});var o=e(4269),i=e(3648);let a=(n,t)=>{var e;return(null!==(e=(0,o.g)())&&void 0!==e?e:(0,o.i)("de")).translate(n,t)};"test"===i.p&&(a=n=>n)},8045:(n,t,e)=>{function o(n){var t,e,i="";if("string"==typeof n||"number"==typeof n)i+=n;else if("object"==typeof n)if(Array.isArray(n)){var a=n.length;for(t=0;t<a;t++)n[t]&&(e=o(n[t]))&&(i&&(i+=" "),i+=e)}else for(e in n)n[e]&&(i&&(i+=" "),i+=e);return i}function i(){for(var n,t,e=0,i="",a=arguments.length;e<a;e++)(n=arguments[e])&&(t=o(n))&&(i&&(i+=" "),i+=t);return i}e.d(t,{c:()=>i})}}]);

package/dist/2231.js

@@ -1,2 +0,0 @@
-/*! For license information please see 2231.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[2231],{1251:(e,n,t)=>{t.d(n,{v:()=>l});var i=t(3892),o=t(7125);const a=(e,n,t)=>{(0,o.b)(t)?e[n]=t:(0,o.i)(t,1)&&(e[n]={icon:t})},s=e=>"object"==typeof e&&null!==e&&(void 0===e.style||(0,o.a)(e.style))&&(void 0===e.label||(0,o.i)(e.label))&&(0,o.i)(e.icon,1),l=(e,n,t={})=>{(0,i.o)(n,(()=>{var l;try{n=(0,i.p)(n)}catch(e){}(0,i.w)(e,"_icons",(e=>{const n="object"==typeof e&&null!==e&&0===Object.keys(e).length;return null===e||n||(0,o.i)(e,1)||"object"==typeof e&&null!==e&&((0,o.i)(e.left,1)||s(e.left)||(0,o.i)(e.right,1)||s(e.right)||(0,o.i)(e.top,1)||s(e.top)||(0,o.i)(e.bottom,1)||s(e.bottom))}),new Set(["KoliBriIcon"]),n,Object.assign(Object.assign({},t),{defaultValue:{},hooks:{afterPatch:null===(l=t.hooks)||void 0===l?void 0:l.afterPatch,beforePatch:(e,n,i,s)=>{var l,r;"function"==typeof(null===(l=t.hooks)||void 0===l?void 0:l.beforePatch)&&(null===(r=t.hooks)||void 0===r||r.beforePatch(e,n,i,s)),(e=>{var n,t,i;if(null===(n=e.nextState)||void 0===n?void 0:n.has("_icons")){const n=null===(t=e.nextState)||void 0===t?void 0:t.get("_icons");null===(i=e.nextState)||void 0===i||i.set("_icons",(e=>{let n={};return(0,o.i)(e,1)?n={left:{icon:e}}:"object"==typeof e&&null!==e&&(a(n,"top",e.top),a(n,"right",e.right),a(n,"bottom",e.bottom),a(n,"left",e.left)),n})(n))}})(i)}}}))}))}},1476:(e,n,t)=>{function i(e){var n=typeof e;return null!=e&&("object"==n||"function"==n)}t.d(n,{i:()=>i})},1621:(e,n,t)=>{t.d(n,{K:()=>r,a:()=>l});var i=t(1111),o=t(5191),a=t(3299),s=t(9346);const l=e=>{var{id:n,suggestions:t}=e,a=(0,i._)(e,["id","suggestions"]);return t?(0,o.h)("datalist",Object.assign({id:`${n}-list`},a),t.map((e=>(0,o.h)("option",{value:e})))):null},r=e=>{var{state:n,customSuggestions:t}=e,r=(0,i._)(e,["state","customSuggestions"]);return(0,o.h)(s.K,Object.assign({},function(e,n){const{ariaDescribedBy:t}=(0,a.g)(e),i={id:e._id,hideLabel:e._hideLabel,label:e._label,accessKey:e._accessKey,disabled:e._disabled,name:e._name,ariaDescribedBy:t};return"_type"in e&&(i.type=e._type),"_value"in e&&(i.value=e._value),"_required"in e&&(i.required=e._required),"_maxLength"in e&&(i.maxlength=e._maxLength),"_placeholder"in e&&(i.placeholder=e._placeholder),"_autoComplete"in e&&(i.autoComplete=e._autoComplete),"_spellCheck"in e&&(i.spellcheck=e._spellCheck),"_pattern"in e&&(i.pattern=e._pattern),"_readOnly"in e&&(i.readonly=e._readOnly),"_min"in e&&(i.min=e._min),"_max"in e&&(i.max=e._max),"_step"in e&&(i.step=e._step),"_multiple"in e&&(i.multiple=e._multiple),"_checked"in e&&(i.checked=e._checked),"_indeterminate"in e&&(i.indeterminate=e._indeterminate),"_touched"in e&&(i.touched=e._touched),"_msg"in e&&(i.msg=(0,a.a)(e._msg)),"_suggestions"in e&&!n&&Array.isArray(e._suggestions)&&e._suggestions.length>0&&(i.suggestions=(0,o.h)(l,{id:e._id,suggestions:e._suggestions})),i}(n,t),r))}},2231:(e,n,t)=>{t.r(n),t.d(n,{kol_input_range:()=>b});var i=t(5191),o=t(1111),a=t(8045),s=t(6943),l=t(9293),r=t(8341),d=t(3892),c=t(2878),u=t(1621),h=t(3299),p=(e,n,t)=>new Promise(((i,o)=>{var a=e=>{try{l(t.next(e))}catch(e){o(e)}},s=e=>{try{l(t.throw(e))}catch(e){o(e)}},l=e=>e.done?i(e.value):Promise.resolve(e.value).then(a,s);l((t=t.apply(e,n)).next())}));class m extends r.I{constructor(e,n,t){super(e,n,t),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,c.v)(this.component,e)}validateValue(e){(0,d.k)(this.component,"_value",e),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{kolFocus(){return p(this,null,(function*(){var e;null===(e=this.refInputNumber)||void 0===e||e.focus()}))}getSanitizedFloatValue(e){const n=parseFloat(e);return this.state._max&&n>this.state._max?this.state._max:this.state._min&&n<this.state._min?this.state._min:n}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))}getFormFieldProps(){return{state:this.state,class:(0,a.c)("kol-input-range","range"),tooltipAlign:this._tooltipAlign,onClick:()=>{var e;return null===(e=this.refInputRange)||void 0===e?void 0:e.focus()},alert:this.showAsAlert()}}getGenericInputProps(){const e=this.state,n=(0,o._)(e,["_suggestions"]);return Object.assign(Object.assign({state:Object.assign(Object.assign({},n),{_suggestions:[]})},this.controller.onFacade),{onChange:this.onChange,onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}get hasSuggestions(){return Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0}getInputRangeProps(){return Object.assign(Object.assign({},this.getGenericInputProps()),{name:this.state._name?`${this.state._name}-range`:void 0,list:this.hasSuggestions?`${this.state._id}-list`:void 0,type:"range",tabIndex:-1,id:void 0,"aria-hidden":"true",ref:this.catchInputRangeRef})}getInputNumberProps(){return Object.assign(Object.assign({},this.getGenericInputProps()),{name:this.state._name?`${this.state._name}-number`:void 0,list:this.hasSuggestions?`${this.state._id}-list`:void 0,type:"number",ref:this.catchInputNumberRef,onKeyDown:this.onKeyDown})}render(){var e;const n={"--kolibri-input-range--input-number--width":`calc(${String(null!==(e=this.state._max)&&void 0!==e?e:1e3).length}ch + 1.5em)`};return(0,i.h)(h.K,Object.assign({key:"c48df03fc1461212e64e534a4f39a5bb5ce77e9a"},this.getFormFieldProps()),(0,i.h)(r.K,{key:"d0f5788051599b6da486f4e521da9dd2b811050f",state:this.state},(0,i.h)("div",{key:"4e3a9f84dd3fddd74389176fe9a0b4ab34a0c4aa",class:"kol-input-range__inputs-wrapper",style:n},(0,i.h)(u.K,Object.assign({key:"ce249e5fe71a3ffd0d22a3b6e60826d828dcf7ae",class:"kol-input-range__input kol-input-range__input--range"},this.getInputRangeProps())),(0,i.h)(u.K,Object.assign({key:"c26d486bac69e075737b7cf273dddbbd5dda16f3",class:"kol-input-range__input kol-input-range__input--number"},this.getInputNumberProps()))),this.hasSuggestions&&(0,i.h)(u.a,{key:"16ca2b65091b9336db06c7465bc9fd592450d1f8",id:this.state._id,suggestions:this.state._suggestions})))}constructor(e){(0,i.r)(this,e),this.catchInputNumberRef=e=>{var n;e&&(this.refInputNumber=e,!this._value&&(null===(n=this.refInputNumber)||void 0===n?void 0:n.value)&&this.validateValue(parseFloat(this.refInputNumber.value)))},this.catchInputRangeRef=e=>{e&&(this.refInputRange=e)},this.onChange=e=>{const n=e.target.value,t=this.getSanitizedFloatValue(n);this.validateValue(t),this.controller.onFacade.onChange(e,t)},this.onKeyDown=e=>{"Enter"!==e.code&&"NumpadEnter"!==e.code||(0,l.p)({form:this.host,ref:this.refInputNumber})},this._accessKey=void 0,this._autoComplete=void 0,this._disabled=!1,this._hideMsg=!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._shortKey=void 0,this._step=void 0,this._suggestions=void 0,this._syncValueBySelector=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_autoComplete:"off",_hideMsg:!1,_id:`id-${(0,s.n)()}`,_label:"",_suggestions:[]},this.inputHasFocus=!1,this.controller=new m(this,"range",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAutoComplete(e){this.controller.validateAutoComplete(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(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)}validateShortKey(e){this.controller.validateShortKey(e)}validateStep(e){this.controller.validateStep(e)}validateSuggestions(e){this.controller.validateSuggestions(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad()}static get delegatesFocus(){return!0}get host(){return(0,i.g)(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_max:["validateMax"],_min:["validateMin"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_shortKey:["validateShortKey"],_step:["validateStep"],_suggestions:["validateSuggestions"],_syncValueBySelector:["validateSyncValueBySelector"],_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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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    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: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\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%;\n    /* 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  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\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  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\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,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}\n@layer kol-component {\n  .kol-input-range__inputs-wrapper {\n    align-items: center;\n    display: flex;\n    flex-direction: row;\n    flex-grow: 1;\n  }\n  .kol-input-range__input--number {\n    width: var(--kolibri-input-range--input-number--width);\n  }\n  .kol-input-range__input--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.5;\n    padding: 0;\n    margin: 0;\n    /* Design-Hack - related with flex-grow */\n    width: 0;\n  }\n  .kol-input-range__input--range::-webkit-slider-thumb {\n    box-sizing: border-box;\n    background-color: #000;\n    height: calc(20rem / var(--kolibri-root-font-size, 16));\n    width: calc(20rem / var(--kolibri-root-font-size, 16));\n    border-radius: 20px;\n    -webkit-appearance: none;\n  }\n  .kol-input-range__input:not(:disabled).kol-input-range__input--range::-webkit-slider-thumb {\n    cursor: pointer;\n  }\n  @media (prefers-contrast: more) or (forced-colors: active) {\n    .kol-input-range__input--range::-webkit-slider-thumb {\n      outline: 1px solid currentColor;\n    }\n  }\n  .kol-input-range__input--range::-moz-range-thumb {\n    box-sizing: border-box;\n    background-color: #000;\n    height: calc(20rem / var(--kolibri-root-font-size, 16));\n    width: calc(20rem / var(--kolibri-root-font-size, 16));\n    border-radius: 20px;\n    -moz-appearance: none;\n  }\n  .kol-input-range__input:not(:disabled).kol-input-range__input--range::-moz-range-thumb {\n    cursor: pointer;\n  }\n}"}},2757:(e,n,t)=>{t.d(n,{K:()=>a});var i=t(5191),o=t(7763);const a=e=>{const{class:n,style:t,icons:a,label:s,onClick:l}=e;return(0,i.h)(o.d,{class:n,style:t,onClick:l,_icons:a,_label:s})}},2878:(e,n,t)=>{t.d(n,{v:()=>o});var i=t(3892);const o=(e,n)=>{(0,i.g)(e,"_suggestions",(e=>"string"==typeof e||"number"==typeof e),n,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.")}}})}},8341:(e,n,t)=>{t.d(n,{I:()=>f,K:()=>v,a:()=>_});var i=t(5191),o=t(8933),a=t(1476),s=t(1111),l=t(7763),r=t(2757),d=t(8045),c=t(3299),u=t(1251);const h=(e,n)=>{var{position:t="start",class:o}=e,a=(0,s._)(e,["position","class"]);const l="kol-input-container__adornment",r=`${l}--${t}`;return(0,i.h)("div",Object.assign({class:(0,d.c)(l,r,o)},a),n)};function p(e){return!!e&&(Array.isArray(e)?e.length>0:Boolean(e))}const m=(e,n)=>{var{class:t}=e,o=(0,s._)(e,["class"]);return(0,i.h)("div",Object.assign({class:(0,d.c)("kol-input-container__container",t)},o),n)},b=(e,n)=>{const{class:t,startAdornment:o,endAdornment:a,disabled:l,msg:r,touched:u,containerProps:b,startAdornmentProps:g,endAdornmentProps:_}=e,v=(0,s._)(e,["class","startAdornment","endAdornment","disabled","msg","touched","containerProps","startAdornmentProps","endAdornmentProps"]),f=(0,c.c)(r,u),k={"kol-input-container--disabled":l,[`kol-input-container--${(null==r?void 0:r.type)||"error"}`]:f},y=Object.assign({class:(0,d.c)("kol-input-container",k,t)},v);return p(o)||p(a)?(0,i.h)("div",Object.assign({},y),(0,i.h)(h,Object.assign({},g,{position:"start"}),o),(0,i.h)(m,Object.assign({},b),n),(0,i.h)(h,Object.assign({},_,{position:"end"}),a)):(0,i.h)("div",Object.assign({},y),(0,i.h)(m,Object.assign({},b),n))},g=e=>{const{label:n,icons:t,hideLabel:o,disabled:a,onClick:r}=e,d=(0,s._)(e,["label","icons","hideLabel","disabled","onClick"]);return(0,i.h)(l.a,Object.assign({_label:n,_disabled:a,_icons:t,_hideLabel:o,_on:{onClick:r}},d))},_=e=>{const{componentName:n="button",label:t,icon:o,onClick:a}=e,l=(0,s._)(e,["componentName","label","icon","onClick"]),d="button"===n?g:r.K;return(0,i.h)(d,Object.assign({label:t||"",hideLabel:!0,icons:`codicon codicon-${o}`,onClick:a},l))},v=({state:e,endAdornment:n},t)=>{const{icons:s,smartButton:l,disabled:r,msg:d,touched:u}=function(e){let n,t;return"_icons"in e&&(n=e._icons),"_smartButton"in e&&(t=e._smartButton),{icons:n,smartButton:t,disabled:e._disabled,msg:(0,c.a)(e._msg),touched:e._touched}}(e);let h=null==s?void 0:s.left;(0,o.i)(h)&&(h={icon:h});let p=null==s?void 0:s.right;(0,o.i)(p)&&(p={icon:p});const m=[],g=[];return n&&(Array.isArray(n)?g.push(...n):g.push(n)),h&&m.push((0,i.h)(_,Object.assign({componentName:"icon",class:"kol-input-container__icon"},(0,a.i)(h)?h:{}))),(0,a.i)(l)&&g.push((0,i.h)(_,Object.assign({componentName:"button",class:"kol-input-container__smart-button"},l,{hideLabel:!0,disabled:r}))),p&&g.push((0,i.h)(_,Object.assign({componentName:"icon",class:"kol-input-container__icon"},(0,a.i)(p)?p:{}))),(0,i.h)(b,{disabled:r,msg:d,touched:u,startAdornment:m,endAdornment:g},t)};class f extends c.I{constructor(e,n,t){super(e,n,t),this.component=e}validateIcons(e){(0,u.v)(this.component,e)}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons)}}},9293:(e,n,t)=>{t.d(n,{a:()=>l,p:()=>r});var i=t(7763),o=t(3892),a=t(3051);const s=e=>{for((0,a.a)()&&((0,o.j)("↓ Search form element start."),a.L.debug(e));e instanceof HTMLElement&&"FORM"!==e.tagName&&e.tagName!==i.h.toUpperCase();){try{e=e.parentElement instanceof HTMLElement?e.parentElement:e.parentNode instanceof ShadowRoot?e.parentNode.host:null}catch(e){}(0,a.a)()&&(a.L.debug(e),(0,o.j)("↑ Search form element finished."))}return e},l=(e={})=>{var n,t;const a=s(e.form);if(a instanceof HTMLElement){const e=new Event("reset",{bubbles:!0,cancelable:!0});if("FORM"===a.tagName)(0,o.n)(e,a),a.dispatchEvent(e);else if(a.tagName===i.h.toUpperCase()){(0,o.n)(e,o.K.querySelector("form",a));const i=a;"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=s(e.form);if(n instanceof HTMLElement){const e=new SubmitEvent("submit",{bubbles:!0,cancelable:!0,submitter:n});if("FORM"===n.tagName)(0,a.a)()&&!1===n.noValidate&&(0,o.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,o.n)(e,n),n.dispatchEvent(e))}));else if(n.tagName===i.h.toUpperCase()){(0,o.n)(e,o.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))}))}}}},9346:(e,n,t)=>{t.d(n,{K:()=>l});var i=t(1111),o=t(5191),a=t(8045),s=t(3299);const l=e=>{const{class:n,msg:t,required:l,disabled:r,touched:d,readonly:c,ariaDescribedBy:u,hideLabel:h,label:p,suggestions:m,value:b}=e,g=(0,i._)(e,["class","msg","required","disabled","touched","readonly","ariaDescribedBy","hideLabel","label","suggestions","value"]),_=(0,s.c)(t,d),v={"kol-input--disabled":Boolean(r),"kol-input--required":Boolean(l),"kol-input--touched":Boolean(d),"kol-input--readonly":Boolean(c),[`kol-input--${(null==t?void 0:t.type)||"error"}`]:_},f=Object.assign(Object.assign({class:(0,a.c)("kol-input",v,n),required:l,disabled:r,readonly:c,type:"text",list:m?`${g.id}-list`:void 0},(0,s.f)({ariaDescribedBy:u,hideLabel:h,label:p})),g);return(0,o.h)(o.F,null,(0,o.h)("input",Object.assign({},f,{value:b})),m)}}}]);

package/dist/2596.js

@@ -1,2 +0,0 @@
-/*! For license information please see 2596.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[2596],{2596:(n,e,t)=>{t.r(e),t.d(e,{kol_skip_nav:()=>r});var i=t(5191),a=t(6043),o=t(2677),l=t(7763),s=t(3638);const r=class{constructor(n){(0,i.r)(this,n),this._label=void 0,this._links=void 0,this.state={_label:"",_links:[]}}render(){return(0,i.h)("nav",{key:"6696f974f96add5529fce40c73c96429d6d46c14",class:"kol-skip-nav","aria-label":this.state._label},(0,i.h)("ul",{key:"44472c7c253cb6bdffd89d999d9b5f11a39bad22",class:"kol-skip-nav__list"},this.state._links.map(((n,e)=>(0,i.h)("li",{class:"kol-skip-nav__list-item",key:e},(0,i.h)(l.f,Object.assign({},n)))))))}validateLabel(n,e,t=!1){t||(0,a.r)(this.state._label),(0,s.v)(this,n,{required:!0}),(0,a.a)(this.state._label)}validateLinks(n){(0,o.w)("KolSkipNav",this,n)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){(0,a.r)(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}};r.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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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    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: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\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%;\n    /* 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  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\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  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\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,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-skip-nav {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-skip-nav__list {\n    display: grid;\n    list-style: none;\n    place-items: center;\n  }\n  .kol-skip-nav__list-item {\n    height: 0;\n  }\n  .kol-skip-nav .kol-link {\n    left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n    overflow: hidden;\n    position: absolute;\n    z-index: 9999999;\n    line-height: 1;\n  }\n  .kol-skip-nav .kol-link:focus {\n    background-color: #fff;\n    left: unset;\n    position: unset;\n  }\n}"}},2677:(n,e,t)=>{t.d(e,{w:()=>a});var i=t(3892);const a=(n,e,t)=>{(0,i.g)(e,"_links",(n=>"object"==typeof n&&("string"==typeof n._href||"string"==typeof n._label)),t),(0,i.h)(n,e.state._links.length)}},3638:(n,e,t)=>{t.d(e,{a:()=>c,b:()=>s,c:()=>r,h:()=>a,v:()=>h});var i=t(3892);const a=[0,1,2,3,4,5,6],o=/[a-zA-Z0-9äöüÄÖÜß]/g,l=/^\d+$/;function s(n,e=1){return function(n){var e;return"string"==typeof n&&(null===(e=n.match(o))||void 0===e?void 0:e.length)||0}(n)>=e}function r(n){return l.test(n)}const d=new Set(["string"]),h=(n,e,t={})=>{(0,i.w)(n,"_label",(n=>"string"==typeof n),d,e,function(n){var e;return Object.assign(Object.assign({},n),{hooks:{afterPatch:(e,t,a,o)=>{var l,d;"function"==typeof(null===(l=n.hooks)||void 0===l?void 0:l.afterPatch)&&(null===(d=n.hooks)||void 0===d||d.afterPatch(e,t,a,o)),"string"==typeof e&&!1===s(e,3)&&!1===r(e)&&(0,i.a)(`The heading or label ("${e}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof e&&e.length>80&&(0,i.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(e=n.hooks)||void 0===e?void 0:e.beforePatch}})}(t))},c=h},6043:(n,e,t)=>{t.d(e,{a:()=>o,r:()=>l});var i=t(3051);const a=new Set;function o(n){a.has(n)?i.L.error(`There already is a nav element with the label "${n}"`,{forceLog:!0}):a.add(n)}function l(n){a.delete(n)}}}]);