@public-ui/sample-react 2.0.9 → 2.0.11

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

@@ -8,7 +8,7 @@ import type { Components } from '@public-ui/components';
 export const TextareaCases = forwardRef<HTMLKolTextareaElement, Components.KolTextarea>(function TextareaCases(props, ref) {
 	return (
 		<div className="grid gap-4">
-			<KolTextarea {...props} _error={ERROR_MSG} _label="Text" _touched />
+			<KolTextarea {...props} _msg={{ _type: 'error', _description: ERROR_MSG }} _label="Text" _touched />
 			<KolTextarea {...props} ref={ref} _accessKey="T" _label="Text (3 rows)" _rows={3} />
 		</div>
 	);

package/src/components/textarea/readonly.tsx

@@ -11,7 +11,12 @@ export const TextareaReadOnly: FC = () => (
 			<p>Hier ist ein Beispiel für ein Textfeld, in das nicht geschrieben werden kann.</p>
 		</SampleDescription>
 		<KolForm>
-			<KolTextarea _error="Es ist ein Fehler aufgetreten." _readOnly _value="Kleiner Text im Eingabefeld ..." _label="Texteingabe" />
+			<KolTextarea
+				_msg={{ _type: 'error', _description: 'Es ist ein Fehler aufgetreten' }}
+				_readOnly
+				_value="Kleiner Text im Eingabefeld ..."
+				_label="Texteingabe"
+			/>
 		</KolForm>
 	</>
 );

package/src/components/toast/basic.tsx

@@ -7,9 +7,9 @@ import { getRoot } from '../../shares/react-roots';
 import { SampleDescription } from '../SampleDescription';
 
 import type { FC } from 'react';
-const toaster = ToasterService.getInstance(document);
 
 export const ToastBasic: FC = () => {
+	const toaster = ToasterService.getInstance(document);
 	const handleButtonClickSimple = () => {
 		void toaster.enqueue({
 			description: 'Toasty',

package/src/react.main.tsx

@@ -1,6 +1,7 @@
 import React, { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { HashRouter as Router } from 'react-router-dom';
+import { setTagNameTransformer } from '@public-ui/react';
 
 import { bootstrap } from '@public-ui/components';
 import { defineCustomElements } from '@public-ui/components/dist/loader';
@@ -12,33 +13,50 @@ import type { Generic } from 'adopted-style-sheets';
 
 type Theme = Generic.Theming.RegisterPatch<string, string, string>;
 
-void (async () => {
+const ENABLE_TAG_NAME_TRANSFORMER =
+	process.env.ENABLE_TAG_NAME_TRANSFORMER === 'true' || new URL('https://x' + location.hash.substring(1)).searchParams.has('enableTagNameTransformer');
+
+const tagNameTransformer = (tagName: string) => `${tagName}-sample`;
+if (ENABLE_TAG_NAME_TRANSFORMER) {
+	setTagNameTransformer(tagNameTransformer);
+}
+
+const getThemes = async () => {
 	if (process.env.THEME_MODULE) {
 		/* Visual regression testing mode: Themes are overridden with a certain theme module, that should be used instead. */
-		const { [(process.env.THEME_EXPORT as string) ?? 'default']: theme } = (await import(process.env.THEME_MODULE)) as Record<string, Theme>;
-		try {
-			await bootstrap([theme], defineCustomElements, {
-				translation: {
-					name: 'de',
-				},
-			});
-		} catch (error) {
-			console.warn('Theme registration failed:', error);
-		}
-	} else {
-		/* Regular mode: Register all known themes. */
-		try {
-			await bootstrap([BMF, DEFAULT, ECL_EC, ECL_EU, ITZBund], defineCustomElements, {
-				theme: {
-					detect: 'auto',
-				},
+		const { [(process.env.THEME_EXPORT as string) || 'default']: theme } = (await import(process.env.THEME_MODULE)) as Record<string, Theme>;
+		return [theme];
+	}
+
+	/* List of regular sample app themes */
+	return [BMF, DEFAULT, ECL_EC, ECL_EU, ITZBund];
+};
+
+void (async () => {
+	try {
+		await bootstrap(
+			await getThemes(),
+			() => {
+				// @see https://github.com/ionic-team/stencil/issues/2847
+				// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+				defineCustomElements(window, {
+					transformTagName: ENABLE_TAG_NAME_TRANSFORMER ? tagNameTransformer : undefined,
+				} as any);
+			},
+			{
+				theme: process.env.THEME_MODULE
+					? undefined
+					: {
+							detect: 'auto',
+						},
 				translation: {
 					name: 'de',
 				},
-			});
-		} catch (error) {
-			console.warn('Theme registration failed:', error);
-		}
+				transformTagName: ENABLE_TAG_NAME_TRANSFORMER ? tagNameTransformer : undefined,
+			},
+		);
+	} catch (error) {
+		console.warn('Theme registration failed:', error);
 	}
 
 	/**

package/src/scenarios/appointment-form/AvailableAppointmentsForm.tsx

@@ -1,5 +1,5 @@
 import { Field, useFormikContext } from 'formik';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 
 import { KolButton, KolForm, KolHeading, KolInputDate, KolInputRadio, KolSpin } from '@public-ui/react';
 
@@ -8,19 +8,24 @@ import { fetchAvailableTimes } from './appointmentService';
 import type { FormValues } from './AppointmentForm';
 import type { FieldProps } from 'formik';
 import type { Option } from '@public-ui/components';
-import { createErrorList } from './formUtils';
+import { createErrorList, focusErrorList } from './formUtils';
 
 export function AvailableAppointmentsForm() {
 	const form = useFormikContext<FormValues>();
 
 	const [sectionSubmitted, setSectionSubmitted] = useState(false);
 	const [availableTimes, setAvailableTimes] = useState<Option<string>[] | null>(null);
-
+	const [schouldFocusErrorList, setSchouldFocusErrorList] = useState(true);
 	const errorList = createErrorList(form.errors);
+	const formikRef = useRef(null);
 
 	useEffect(() => {
 		let ignoreResponse = false;
 		setAvailableTimes(null);
+		if (schouldFocusErrorList && sectionSubmitted) {
+			focusErrorList(errorList, formikRef);
+			setSchouldFocusErrorList(false);
+		}
 
 		if (form.values.date) {
 			fetchAvailableTimes().then(
@@ -37,17 +42,19 @@ export function AvailableAppointmentsForm() {
 		return () => {
 			ignoreResponse = true;
 		};
-	}, [form.values.date]);
+	}, [form.values.date, sectionSubmitted]);
 
 	return (
 		<div className="p-2">
 			<KolHeading _level={2} _label="Wählen Sie einen Termin aus"></KolHeading>
 			<KolForm
+				ref={formikRef}
 				_errorList={sectionSubmitted ? errorList : []}
 				_on={{
 					onSubmit: () => {
 						setSectionSubmitted(true);
 						void form.submitForm();
+						focusErrorList(errorList, formikRef);
 					},
 				}}
 			>

package/src/scenarios/appointment-form/DistrictForm.tsx

@@ -1,11 +1,11 @@
 import { Field, useFormikContext } from 'formik';
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 
 import { KolButton, KolForm, KolHeading, KolSelect } from '@public-ui/react';
 
 import type { FieldProps } from 'formik';
 import type { FormValues } from './AppointmentForm';
-import { createErrorList } from './formUtils';
+import { createErrorList, focusErrorList } from './formUtils';
 
 const LOCATION_OPTIONS = [
 	{
@@ -34,16 +34,23 @@ export function DistrictForm() {
 	const form = useFormikContext<FormValues>();
 	const errorList = createErrorList(form.errors);
 	const [sectionSubmitted, setSectionSubmitted] = useState(false);
+	const formikRef = useRef<HTMLKolFormElement>(null);
+
+	useEffect(() => {
+		focusErrorList(errorList, formikRef);
+	}, [sectionSubmitted]);
 
 	return (
 		<div className="p-2">
 			<KolHeading _level={2} _label="Wählen Sie einen Stadtteil aus"></KolHeading>
 			<KolForm
+				ref={formikRef}
 				_errorList={sectionSubmitted ? errorList : []}
 				_on={{
 					onSubmit: () => {
 						void form.submitForm();
 						setSectionSubmitted(true);
+						focusErrorList(errorList, formikRef);
 					},
 				}}
 			>

package/src/scenarios/appointment-form/PersonalInformationForm.tsx

@@ -1,11 +1,11 @@
 import { Field, useFormikContext } from 'formik';
-import React, { useState } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 
 import { KolButton, KolForm, KolHeading, KolInputEmail, KolInputText, KolSelect } from '@public-ui/react';
 
 import type { FieldProps } from 'formik';
 import type { FormValues } from './AppointmentForm';
-import { createErrorList } from './formUtils';
+import { createErrorList, focusErrorList } from './formUtils';
 
 const SALUTATION_OPTIONS = [
 	{
@@ -30,16 +30,22 @@ export function PersonalInformationForm() {
 	const form = useFormikContext<FormValues>();
 	const [sectionSubmitted, setSectionSubmitted] = useState(false);
 	const errorList = createErrorList(form.errors);
+	const formikRef = useRef(null);
 
+	useEffect(() => {
+		focusErrorList(errorList, formikRef);
+	}, [sectionSubmitted]);
 	return (
 		<div className="p-2">
 			<KolHeading _level={2} _label="Geben Sie Ihre Kontaktdaten ein"></KolHeading>
 			<KolForm
+				ref={formikRef}
 				_errorList={sectionSubmitted ? errorList : []}
 				_on={{
 					onSubmit: () => {
 						void form.submitForm();
 						setSectionSubmitted(true);
+						focusErrorList(errorList, formikRef);
 					},
 				}}
 			>

package/src/scenarios/appointment-form/formUtils.ts

@@ -6,3 +6,9 @@ export function createErrorList(formikErrors: Record<string, string>): ErrorList
 		selector: `#field-${fieldName}`,
 	}));
 }
+
+export function focusErrorList(errorList: ErrorListPropType[], formikRef: React.RefObject<HTMLKolFormElement>) {
+	if (errorList.length > 0 && formikRef && formikRef.current) {
+		formikRef.current.focusErrorList().catch(console.warn);
+	}
+}

package/src/scenarios/routes.ts

@@ -1,6 +1,5 @@
 import { Routes } from '../shares/types';
 import { AppointmentForm } from './appointment-form/AppointmentForm';
-import { TerminComponent } from './complex-form/component';
 import { CustomTooltipWidth } from './custom-tooltip-width';
 import { DisabledInteractiveElements } from './disabled-interactive-elements';
 import { InputsGetValue } from './inputs-get-value';
@@ -8,7 +7,6 @@ import { StaticForm } from './static-form';
 
 export const SCENARIO_ROUTES: Routes = {
 	scenarios: {
-		'complex-form': TerminComponent,
 		'appointment-form': AppointmentForm,
 		'inputs-get-value': InputsGetValue,
 		'custom-tooltip-width': CustomTooltipWidth,

package/src/shares/react-roots.ts

@@ -4,6 +4,7 @@ const REACT18_ROOTS = new WeakMap<Element | DocumentFragment, Root>();
 
 export const getRoot = (el: Element | DocumentFragment): Root => {
 	if (REACT18_ROOTS.has(el) === false) {
+		/* https://react.dev/reference/react-dom/client/createRoot */
 		REACT18_ROOTS.set(el, createRoot(el));
 	}
 	return REACT18_ROOTS.get(el) as Root;

package/src/shares/store.ts

@@ -1,7 +1,7 @@
 import { Option } from '@public-ui/components';
 import PackageJson from '@public-ui/components/package.json';
 
-import { isTheme, Store, Theme, THEME_OPTIONS } from './theme';
+import { isTheme, Store, ThemeAndUnstyled, THEME_OPTIONS } from './theme';
 
 const STORE_IDENTIFIER = `public-ui.v${PackageJson.version}`;
 
@@ -63,7 +63,7 @@ export const getDarkMode = (): boolean => {
 	return STORE.darkMode === true;
 };
 
-export const setTheme = (theme: Theme) => {
+export const setTheme = (theme: ThemeAndUnstyled) => {
 	if (isTheme(theme)) {
 		STORE.theme = theme;
 		setStore();
@@ -72,13 +72,13 @@ export const setTheme = (theme: Theme) => {
 	}
 };
 
-export const getTheme = (): Theme => {
+export const getTheme = (): ThemeAndUnstyled => {
 	return `${STORE.theme}`;
 };
 
-export const getThemeName = (theme: Theme) => {
+export const getThemeName = (theme: ThemeAndUnstyled) => {
 	if (isTheme(theme)) {
-		return THEME_OPTIONS.find((option) => (option as Option<Theme>).value === theme)?.label;
+		return THEME_OPTIONS.find((option) => (option as Option<ThemeAndUnstyled>).value === theme)?.label;
 	} else {
 		throw new Error(`The theme identifier "${theme}" is not valid or an available option.`);
 	}

package/src/shares/theme.ts

@@ -1,11 +1,12 @@
 import { SelectOption } from '@public-ui/components';
 
 export const THEMES = ['bmf', 'default', 'ecl-ec', 'ecl-eu', 'itzbund'] as const;
-export type Theme = (typeof THEMES)[number] | 'unstyled';
+export type Theme = (typeof THEMES)[number];
+export type ThemeAndUnstyled = Theme | 'unstyled';
 
-const drafts: Theme[] = ['ecl-ec', 'ecl-eu', 'itzbund'];
+const drafts: ThemeAndUnstyled[] = ['ecl-ec', 'ecl-eu', 'itzbund'];
 
-export const isDraftTheme = (theme: Theme) => drafts.includes(theme);
+export const isDraftTheme = (theme: ThemeAndUnstyled) => drafts.includes(theme);
 
 export const isTheme = (value: unknown) => {
 	return THEMES.find((theme) => theme === value) !== undefined;
@@ -13,10 +14,10 @@ export const isTheme = (value: unknown) => {
 
 export type Store = {
 	darkMode: boolean;
-	theme: Theme;
+	theme: ThemeAndUnstyled;
 };
 
-export const THEME_OPTIONS: SelectOption<Theme>[] = [
+export const THEME_OPTIONS: SelectOption<ThemeAndUnstyled>[] = [
 	{
 		label: 'Unstyled (Uncolored)',
 		value: 'unstyled',

package/webpack.config.js

@@ -8,6 +8,7 @@ module.exports = (...args) => {
 		new webpack.EnvironmentPlugin({
 			THEME_MODULE: '',
 			THEME_EXPORT: '',
+			ENABLE_TAG_NAME_TRANSFORMER: '',
 		}),
 	);
 	return config;

package/dist/1090.js

@@ -1,2 +0,0 @@
-/*! For license information please see 1090.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[1090],{1090:(n,e,t)=>{t.r(e),t.d(e,{kol_breadcrumb:()=>s});var i=t(9305),a=t(3561),l=t(9443),o=t(4535);const s=class{constructor(n){(0,i.r)(this,n),this.renderLink=(n,e)=>{const t=this.state._links.length-1;return(0,i.h)("li",{key:e},0!==e&&(0,i.h)("kol-icon",{_label:"",_icons:"codicon codicon-chevron-right"}),e===t?(0,i.h)("span",null,n._hideLabel?(0,i.h)("kol-icon",{_label:n._label,_icons:"string"==typeof n._icons?n._icons:"codicon codicon-symbol-event"}):(0,i.h)(i.F,null,n._label)):(0,i.h)("kol-link",Object.assign({},n)))},this._label=void 0,this._links=void 0,this.state={_label:"",_links:[]}}render(){return(0,i.h)(i.H,{key:"84b5eb61c0a24a5e1e8699d8daa5a557091b8cad",class:"kol-breadcrumb"},(0,i.h)("nav",{key:"0e6b725e4895eb7ac61a4786cfa910410bf42a98","aria-label":this.state._label},(0,i.h)("ul",{key:"1527c13e34bcbfb93feec4d4724e39a8af616ba4"},0===this.state._links.length&&(0,i.h)("li",null,(0,i.h)("kol-icon",{_label:"",_icons:"codicon codicon-home"}),"…"),this.state._links.map(this.renderLink))))}validateLabel(n,e,t=!1){t||(0,l.r)(this.state._label),(0,a.v)(this,n,{required:!0}),(0,a.t)(n),(0,l.a)(this.state._label)}validateLinks(n){(0,o.w)("KolBreadcrumb",this,n)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){(0,l.r)(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}};s.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  li,\n  ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    display: flex;\n    gap: 0.5em;\n    flex-wrap: wrap;\n    place-items: center;\n  }\n  .kol-icon::part(separator) {\n    font-weight: 900;\n    font-size: 0.7em;\n  }\n  .kol-icon::part(separator):before {\n    content: \"\\f054\";\n    font-family: \"Font Awesome 6 Free\";\n  }\n}"}},9443:(n,e,t)=>{t.d(e,{a:()=>a,r:()=>l});const i=new Set;function a(n){i.has(n)?console.error(`There already is a nav element with the label "${n}"`):i.add(n)}function l(n){i.delete(n)}},4535:(n,e,t)=>{t.d(e,{w:()=>a});var i=t(3561);const a=(n,e,t)=>{(0,i.u)(e,"_links",(n=>"object"==typeof n&&("string"==typeof n._href||"string"==typeof n._label)),t),(0,i.x)(n,e.state._links.length)}}}]);

package/dist/1218.js

@@ -1,2 +0,0 @@
-/*! For license information please see 1218.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[1218],{1218:(e,n,t)=>{t.r(n),t.d(n,{kol_progress:()=>l});var a=t(9305),i=t(3561);const r=Object.keys(i.ai),l=class{constructor(e){(0,a.r)(this,e),this._label=void 0,this._max=void 0,this._unit="%",this._value=void 0,this._variant=void 0,this.state={_max:100,_unit:"%",_value:0,_variant:"bar",_liveValue:0}}render(){return(0,a.h)(a.H,{key:"d786a699c8196c6a4b89af222b716a0846553161",class:"kol-progress"},(e=>{let n="43%",t=e._label?"57%":"50%";switch(e._variant){case"cycle-value-label":e._label&&(n="57%",t="43%");case"cycle":case"cycle-label-value":return(0,a.h)("svg",{class:"cycle",width:"100",viewBox:"0 0 120 120",xmlns:"http://www.w3.org/2000/svg"},(0,a.h)("circle",{class:"background",cx:"60",cy:"60",r:"54.5",fill:"currentColor",stroke:"currentColor","stroke-width":"8"}),(0,a.h)("circle",{class:"whitespace",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"3"}),(0,a.h)("circle",{class:"border",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),(0,a.h)("circle",{class:"whitespace",cx:"60",cy:"60",r:"51",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),(0,a.h)("circle",{class:"border",cx:"60",cy:"60",r:"50",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),(0,a.h)("circle",{class:"progress",fill:"currentColor",stroke:"currentColor","stroke-linecap":"round","stroke-dasharray":`${Math.round(e._value/e._max*342)}px 342px`,"stroke-width":"6",cx:"60",cy:"60",r:"54.5"}),e._label&&(0,a.h)("text",{"aria-hidden":"true",x:"50%",y:n,"text-anchor":"middle",fill:"currentColor"},e._label),(0,a.h)("text",{"aria-hidden":"true",x:"50%",y:t,"text-anchor":"middle",fill:"currentColor"},e._value,e._unit));default:return(0,a.h)("div",{class:"bar"},e._label&&(0,a.h)("div",null,e._label),(0,a.h)("div",{style:{display:"flex",gap:"0.3em"}},(0,a.h)("svg",{width:"100",viewBox:"0 0 102 8",xmlns:"http://www.w3.org/2000/svg"},(0,a.h)("rect",{class:"background",x:"1",y:"1",height:"10",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",width:"100"}),(0,a.h)("rect",{class:"progress",x:"2.5",y:"2.5",height:"7",rx:"3.5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",width:e._value/e._max*95}),(0,a.h)("rect",{class:"border",x:"1",y:"1",height:"10",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"1",width:"100"})),(0,a.h)("text",{"aria-hidden":"true","text-anchor":"middle","dominant-baseline":"central",fill:"currentColor"},e._value,e._unit)))}})(this.state),(0,a.h)("progress",{key:"a32a4cc78b6a3d36686da476b18583f26d914002","aria-busy":this.state._value<this.state._max?"true":"false",max:this.state._max,value:this.state._value}),(0,a.h)("span",{key:"db4af0c75d07dd5b8f2ec8dccdfcbbf20c4b5781","aria-live":"polite","aria-relevant":"removals text",class:"visually-hidden"},this.state._liveValue," von ",this.state._max," ",this.state._unit))}validateLabel(e){(0,i.v)(this,e)}validateMax(e){"number"!=typeof e&&(e=100),(0,i.a5)(this,"_max",e,{required:!0})}validateUnit(e){(0,i.A)(this,"_unit",e)}validateValue(e){"number"!=typeof e&&(e=0),(0,i.a5)(this,"_value",e,{required:!0})}validateVariant(e){(0,i.w)(this,"_variant",(e=>"string"==typeof e&&r.includes(e)),new Set(r),e)}componentWillLoad(){this.validateLabel(this._label),this.validateMax(this._max),this.validateUnit(this._unit),this.validateValue(this._value),this.validateVariant(this._variant),this.interval=setInterval((()=>{this.state._liveValue!==this.state._value&&(this.state=Object.assign(Object.assign({},this.state),{_liveValue:this.state._value}))}),5e3)}disconnectedCallback(){clearInterval(this.interval)}static get watchers(){return{_label:["validateLabel"],_max:["validateMax"],_unit:["validateUnit"],_value:["validateValue"],_variant:["validateVariant"]}}};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: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  progress {\n    display: block;\n    height: 0;\n    overflow: hidden;\n    width: 0;\n  }\n  .bar .border {\n    fill: transparent;\n    stroke: black;\n  }\n  .bar .background {\n    fill: lightgray;\n    stroke: white;\n  }\n  .bar .progress {\n    fill: #0075ff;\n    stroke: transparent;\n    transition: 250ms ease-in-out 50ms;\n  }\n  .cycle .background {\n    fill: transparent;\n    stroke: lightgray;\n  }\n  .cycle .border {\n    fill: transparent;\n    stroke: black;\n  }\n  .cycle .whitespace {\n    fill: transparent;\n    stroke: white;\n  }\n  .cycle .progress {\n    fill: transparent;\n    stroke: #0075ff;\n    transform-origin: 50% 50%;\n    transform: rotate(-90deg);\n    transition: 250ms ease-in-out 50ms;\n  }\n  /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion */\n  @media (prefers-reduced-motion) {\n    .progress {\n      transition-duration: 0s;\n      transition-delay: 0s;\n    }\n  }\n}"}}}]);

package/dist/1280.js

@@ -1,2 +0,0 @@
-/*! For license information please see 1280.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[1280],{1280:(e,t,i)=>{i.r(t),i.d(t,{kol_tree_item_wc:()=>n});var s=i(9305),a=i(3561),l=(e,t,i)=>new Promise(((s,a)=>{var l=e=>{try{h(i.next(e))}catch(e){a(e)}},n=e=>{try{h(i.throw(e))}catch(e){a(e)}},h=e=>e.done?s(e.value):Promise.resolve(e.value).then(l,n);h((i=i.apply(e,t)).next())}));const n=class{constructor(e){(0,s.r)(this,e),this.state={_active:!1,_hasChildren:!1,_href:"",_label:"",_open:!1},this._active=void 0,this._label=void 0,this._open=void 0,this._href=void 0}render(){return(0,s.h)(s.H,{key:"79baf67cdfda8ab6569ef2457e2f22491e491545",onSlotchange:this.handleSlotchange.bind(this),class:"kol-tree-item-wc"},(0,s.h)("li",{key:"5212ac3fbcaec55122e9fe60d0a12c7253e949bd",class:"tree-item"},(0,s.h)("kol-link",{key:"1764c2398ee5c9d175b78eb2934cc5b1f5b3aa64",class:{"tree-link":!0,active:Boolean(this.state._active)},_label:"",_href:this.state._href,ref:e=>this.linkElement=e,_tabIndex:this.state._active?0:-1},(0,s.h)("span",{key:"bcf8abdcde70d98efb9e7af90a411375d5f96fe3",slot:"expert"},this.state._hasChildren&&(this.state._open?(0,s.h)("span",{class:"toggle-button",onClick:e=>{this.handleCollapseClick(e)}},"-"):(0,s.h)("span",{class:"toggle-button",onClick:e=>{this.handleExpandClick(e)}},"+"))," ",this.state._label)),(0,s.h)("ul",{key:"ae32253812ee9f7165c5812dff2dc4c7c8c0df60",hidden:!this.state._hasChildren||!this.state._open,role:"group"},(0,s.h)("slot",{key:"2b778851a20cb1e0a1c14d068b5f6f4235b7fe2c"}))))}validateActive(e){(0,a.at)(this,e||!1)}validateLabel(e){(0,a.v)(this,e)}validateOpen(e){(0,a.l)(this,e)}validateHref(e){(0,a.au)(this,e)}componentWillLoad(){this.validateActive(this._active),this.validateLabel(this._label),this.validateOpen(this._open),this.validateHref(this._href),this.checkForChildren()}handleSlotchange(){this.checkForChildren()}checkForChildren(){var e;this.state=Object.assign(Object.assign({},this.state),{_hasChildren:Boolean(null===(e=this.host.querySelector("slot"))||void 0===e?void 0:e.assignedElements().length)})}focusLink(){return l(this,null,(function*(){this.linkElement.focus()}))}handleExpandClick(e){return l(this,null,(function*(){e.preventDefault(),this.linkElement.focus(),yield this.expand()}))}expand(){return l(this,null,(function*(){this.state._hasChildren&&(this.state=Object.assign(Object.assign({},this.state),{_open:!0}))}))}handleCollapseClick(e){return l(this,null,(function*(){e.preventDefault(),this.linkElement.focus(),yield this.collapse()}))}collapse(){return l(this,null,(function*(){this.state._hasChildren&&(this.state=Object.assign(Object.assign({},this.state),{_open:!1}))}))}isOpen(){return l(this,null,(function*(){var e;return null!==(e=this.state._open)&&void 0!==e&&e}))}get host(){return(0,s.g)(this)}static get watchers(){return{_active:["validateActive"],_label:["validateLabel"],_open:["validateOpen"],_href:["validateHref"]}}}}}]);

package/dist/1338.js

@@ -1,2 +0,0 @@
-/*! For license information please see 1338.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[1338],{5163:(n,e,i)=>{i.d(e,{t:()=>d});var t=i(3561),a=i(5894);const o={error:"Fehler",warning:"Warnung",info:"Hinweis",success:"Erfolg",message:"Nachricht",close:"Schließen","form-description":"Formular-Felder, die mit einem Sternchen (*) gekennzeichnet sind, sind Pflichtangaben.",of:"von",characters:"Zeichen",new:"Neu","no-entries":"Es sind keine Einträge vorhanden.","change-order":"Sortierung von {{colLabel}} ändern","action-running":"Aktion wird ausgeführt...","action-done":"Aktion abgeschlossen",pagination:"Paginierung","page-first":"Direkt zur ersten Seite","page-back":"Eine Seite zurück","page-next":"Eine Seite weiter","page-last":"Direkt zur letzten Seite","entries-per-site":"Einträge pro Seite",page:"Seite","page-current":"Seite {{page}}","page-selected":"Seite {{page}} ist ausgewählt","page-per-site":"{{entries}} Einträge pro Seite","nav-maximize":"Navigation maximieren","nav-minimize":"Navigation minimieren","logo-description":"Logo {{orgShort}}. Bundesadler mit Flaggenstab und Schriftzug {{orgLong}}","open-link-in-tab":"Öffnet in neuem Tab.","kolibri-logo":"Logo von KoliBri","table-pagination-label":"Paginierung für die Tabelle {{label}}","avatar-alt":"Avatar von {{name}}","toast-close-all":"Alle schließen","error-list":"Fehlerliste","error-list-message":"Bitte korrigieren Sie folgende Fehler:",version:"Versionsnummer","table-visible-range":"Einträge {{start}} bis {{end}} von {{total}}"},r={error:"Error",warning:"Warning",info:"Note",success:"Success",message:"Message",close:"Close","form-description":"Form fields marked with an asterisk (*) are mandatory.",of:"of",characters:"characters",new:"New","no-entries":"No entries available.","change-order":"Change order of {{colLabel}}","action-running":"Action is running...","action-done":"Action done",pagination:"Pagination","page-first":"Directly to the first page","page-back":"One page back","page-next":"One page further","page-last":"Directly to the last page","entries-per-site":"Entries per page",page:"Page","page-current":"Page {{page}}","page-selected":"Page {{page}} is selected","page-per-site":"{{entries}} entries per page","nav-maximize":"Maximize navigation","nav-minimize":"Minimize navigation","logo-description":"Logo {{orgShort}}. Federal eagle with flag staff and lettering {{orgLong}}","open-link-in-tab":"Opens in new tab.","kolibri-logo":"KoliBri logo","table-pagination-label":"Pagination for table {{label}}","avatar-alt":"Avatar of {{name}}","toast-close-all":"Close all","error-list":"Error list","error-list-message":"Please correct the following errors",version:"Version number","table-visible-range":"Entries {{start}} to {{end}} of {{total}}"},s=n=>Object.keys(n).reduce(((e,i)=>(e[`kol-${i}`]=n[i],e)),{}),l=new Set([n=>n("en",s(r)),n=>n("de",s(o))]);let d=(n,e)=>{const i=(0,a.g)();let t=i.translate(n,e);return t===n&&(i.addTranslations(l),t=i.translate(n,e)),t};"test"===t.p&&(d=n=>n)},1338:(n,e,i)=>{i.r(e),i.d(e,{kol_spin:()=>r});var t=i(9305),a=i(3561),o=i(5163);const r=class{constructor(n){(0,t.r)(this,n),this.showToggled=!1,this._show=!1,this._variant="dot",this.state={_variant:"dot"}}render(){return(0,t.h)(t.H,{key:"b81ce39211d5f987ffbc53d80961c70b29bd4549",class:"kol-spin"},this.state._show?(0,t.h)("span",{"aria-busy":"true","aria-label":(0,o.t)("kol-action-running"),"aria-live":"polite",class:{spin:!0,[this.state._variant]:!0},role:"alert"},function(n){switch(n){case"cycle":return(0,t.h)("span",{class:"loader"});case"none":return(0,t.h)("slot",{name:"expert"});default:return(0,t.h)(t.F,null,(0,t.h)("span",{class:"bg-spin-1"}),(0,t.h)("span",{class:"bg-spin-2"}),(0,t.h)("span",{class:"bg-spin-3"}),(0,t.h)("span",{class:"bg-neutral"}))}}(this.state._variant)):this.showToggled&&(0,t.h)("span",{"aria-label":(0,o.t)("kol-action-done"),"aria-busy":"false","aria-live":"polite",role:"alert"}))}validateShow(n){this.showToggled=!0===this.state._show&&!1===this._show,(0,a.am)(this,n)}validateVariant(n){(0,a.an)(this,n)}componentWillLoad(){this.validateShow(this._show),this.validateVariant(this._variant)}static get watchers(){return{_show:["validateShow"],_variant:["validateVariant"]}}};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: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .spin.cycle {\n    width: 3rem;\n    height: 3rem;\n  }\n  .spin.cycle > .loader {\n    display: block;\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    position: relative;\n    animation: 2s linear infinite rotate;\n  }\n  .spin.cycle > .loader::before {\n    content: \"\";\n    box-sizing: border-box;\n    position: absolute;\n    inset: 0px;\n    border-radius: 50%;\n    border: 5px solid #333;\n    animation: 3s linear infinite prixClipFix;\n  }\n  @keyframes rotate {\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n  @keyframes prixClipFix {\n    0% {\n      border-color: #fff;\n      clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n    }\n    25% {\n      border-color: #666;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\n    }\n    50% {\n      border-color: #fc0;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);\n    }\n    75% {\n      border-color: red;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\n    }\n    100% {\n      border-color: #000;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\n    }\n  } /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */\n  @media (prefers-reduced-motion) {\n    .spin.cycle > .loader {\n      animation-duration: 4s;\n    }\n    .spin.cycle > .loader::before {\n      animation-duration: 6s;\n    }\n  }\n}\n@layer kol-component {\n  .spin.dot {\n    height: 1rem;\n    width: 3rem;\n  }\n  .spin.dot > span {\n    animation-timing-function: cubic-bezier(0, 1, 1, 0);\n    border-radius: 50%;\n    border: 0.1rem solid #fff;\n    height: 0.8rem;\n    position: absolute;\n    top: 0.1rem;\n    width: 0.8rem;\n  }\n  .spin.dot > span:first-child {\n    background-color: #fc0;\n    z-index: 0;\n    animation: 1s infinite spin1;\n    left: 0.1rem;\n  }\n  .spin.dot > span:nth-child(2) {\n    background-color: red;\n    z-index: 1;\n    animation: 1s infinite spin2;\n    left: 0.1rem;\n  }\n  .spin.dot > span:nth-child(3) {\n    background-color: #000;\n    z-index: 1;\n    animation: 1s infinite spin2;\n    left: 1.1rem;\n  }\n  .spin.dot > span:nth-child(4) {\n    background-color: #666;\n    z-index: 0;\n    animation: 1s infinite spin3;\n    left: 2.1rem;\n  }\n  @keyframes spin1 {\n    0% {\n      transform: scale(0);\n    }\n    100% {\n      transform: scale(1);\n    }\n  }\n  @keyframes spin2 {\n    0% {\n      transform: translate(0, 0);\n    }\n    100% {\n      transform: translate(1rem, 0);\n    }\n  }\n  @keyframes spin3 {\n    0% {\n      transform: scale(1);\n    }\n    100% {\n      transform: scale(0);\n    }\n  } /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */\n  @media (prefers-reduced-motion) {\n    .spin.dot > span:first-child,\n    .spin.dot > span:nth-child(2),\n    .spin.dot > span:nth-child(3),\n    .spin.dot > span:nth-child(4) {\n      animation-duration: 2s;\n    }\n  }\n}\n@layer kol-component {\n  .spin {\n    display: block;\n    padding: 0.125rem;\n    position: relative;\n  }\n}"}}}]);

package/dist/2415.js

@@ -1,2 +0,0 @@
-/*! For license information please see 2415.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[2415],{6090:(t,e,n)=>{n.d(e,{I:()=>o});var i=n(9305);const o=({accessKey:t,label:e})=>{let[n,...o]=e.split(t);return 0===o.length&&(t=t.toUpperCase(),[n,...o]=e.split(t)),0===o.length&&(t=t.toLowerCase(),[n,...o]=e.split(t)),(0,i.h)(i.F,null,n,o.length?(0,i.h)(i.F,null,(0,i.h)("u",null,t),o.join(t)):null)}},2928:(t,e,n)=>{n.d(e,{A:()=>o});var i=n(3561);class o{constructor(t,e,n){var o,a,s,l;if(this.experimentalMode=(0,i.Z)(),this.setFormAssociatedValue=t=>{var e;const n=null===(e=this.formAssociated)||void 0===e?void 0:e.getAttribute("name");null!==n&&""!==n||(0,i.R)(` The form field (${this.type}) must have a name attribute to be form-associated. Please define the _name attribute.`);const o=this.tryToStringifyValue(t);this.syncValue(t,o,this.formAssociated),this.syncValue(t,o,this.syncToOwnInput)},this.component=t,this.host=this.findHostWithShadowRoot(n),this.type=e,this.experimentalMode&&("KOL-BUTTON"===(l=null===(o=this.host)||void 0===o?void 0:o.tagName)||"KOL-INPUT-CHECKBOX"===l||"KOL-INPUT-COLOR"===l||"KOL-INPUT-DATE"===l||"KOL-INPUT-EMAIL"===l||"KOL-INPUT-FILE"===l||"KOL-INPUT-NUMBER"===l||"KOL-INPUT-PASSWORD"===l||"KOL-INPUT-RADIO"===l||"KOL-INPUT-RANGE"===l||"KOL-INPUT-TEXT"===l||"KOL-SELECT"===l||"KOL-TEXTAREA"===l)){switch(null===(a=this.host)||void 0===a||a.querySelectorAll("input,select,textarea").forEach((t=>{var e;null===(e=this.host)||void 0===e||e.removeChild(t)})),this.type){case"button":case"color":case"date":case"email":case"file":case"number":case"password":case"radio":case"range":case"text":this.formAssociated=document.createElement("input"),this.formAssociated.setAttribute("type",this.type);break;case"select":this.formAssociated=document.createElement("select"),this.formAssociated.setAttribute("multiple","");break;case"textarea":this.formAssociated=document.createElement("textarea");break;default:this.formAssociated=document.createElement("input"),this.formAssociated.setAttribute("type","hidden")}this.formAssociated.setAttribute("aria-hidden","true"),this.formAssociated.setAttribute("data-form-associated",""),this.formAssociated.setAttribute("hidden",""),null===(s=this.host)||void 0===s||s.appendChild(this.formAssociated)}}findHostWithShadowRoot(t){for(;null===(null==t?void 0:t.shadowRoot)&&t!==document.body;)(t=null==t?void 0:t.parentNode).host&&(t=t.host);return t}setAttribute(t,e,n){if(this.experimentalMode)try{if("boolean"!=typeof(n="object"==typeof n&&null!==n?JSON.stringify(n):n)&&"number"!=typeof n&&"string"!=typeof n)throw new Error("Invalid value type: "+typeof n);null==e||e.setAttribute(t,`${n}`)}catch(n){null==e||e.removeAttribute(t)}}tryToStringifyValue(t){try{return"object"==typeof t&&null!==t?JSON.stringify(t).toString():null==t?null:t.toString()}catch(t){return(0,i.$)(`The form field raw value is not able to stringify! ${t}`),""}}syncValue(t,e,n){if(n)switch(this.type){case"file":n.files=t;break;case"select":n.querySelectorAll("option").forEach((t=>{n.removeChild(t)})),Array.isArray(t)&&t.forEach((t=>{const e=this.tryToStringifyValue(t);if("string"==typeof e){const t=document.createElement("option");t.setAttribute("value",e),t.setAttribute("selected",""),n.appendChild(t)}}));break;default:"string"==typeof e?(n.setAttribute("value",e),n.value=e):(n.removeAttribute("value"),n.value="")}}validateName(t){(0,i.a0)(this.component,t,{hooks:{afterPatch:()=>{this.setAttribute("name",this.formAssociated,this.component.state._name)}}}),void 0===t&&(0,i.R)("Ein Name am Eingabefeldern oder Schalter ist nicht zwingend erforderlich, kann aber für die Autocomplete-Funktion und für das statische Versenden des Eingabefeldes relevant sein.")}validateSyncValueBySelector(t){if(this.experimentalMode&&"string"==typeof t){const e=document.querySelector(t);e&&(this.syncToOwnInput=e)}}componentWillLoad(){this.validateName(this.component._name),this.validateSyncValueBySelector(this.component._syncValueBySelector)}}},9752:(t,e,n)=>{n.d(e,{I:()=>s,a:()=>l,f:()=>a});var i=n(3561),o=n(5975);const a=(t,e,n="")=>{e.forEach(((e,i)=>{const o=`${n}-${i}`;"object"==typeof e&&null!==e&&"string"==typeof e.label&&e.label.length>0&&(Array.isArray(e.options)?a(t,e.options,o):t.set(o,e))}))};class s extends o.I{constructor(t,e,n){super(t,e,n),this.component=t}validateRequired(t){(0,i.U)(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateRequired(this.component._required)}}class l extends s{constructor(t,e,n){super(t,e,n),this.keyOptionMap=new Map,this.getOptionByKey=t=>this.keyOptionMap.get(t),this.isValueInOptions=(t,e)=>void 0!==e.find((e=>e.value===t)),this.afterPatchOptions=(t,e,n,i)=>{"_value"===i&&this.setFormAssociatedValue(t)},this.beforePatchOptions=(t,e)=>{const n=e.has("_options")?e.get("_options"):this.component.state._options;if(Array.isArray(n)&&n.length>0){this.keyOptionMap.clear(),a(this.keyOptionMap,n);const t=e.has("_value")?e.get("_value"):this.component.state._value;!1===this.isValueInOptions(t,n)&&(e.set("_value",n[0].value),this.onStateChange())}},this.component=t}validateOrientation(t){(0,i.w)(this.component,"_orientation",(t=>"string"==typeof t&&i.V.includes(t)),new Set([`Orientation {${i.V.join(", ")}`]),t,{defaultValue:"vertical"})}validateOptions(t){(0,i.W)(this.component,t,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateValue(t){t=(0,i.X)(t),t=Array.isArray(t)?t[0]:t,(0,i.k)(this.component,"_value",t,{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions})}componentWillLoad(t){super.componentWillLoad(),this.onStateChange=()=>{if("function"==typeof t){const e=setTimeout((()=>{clearTimeout(e),t(i.Y)}))}},this.validateOrientation(this.component._orientation),this.validateOptions(this.component._options),this.validateValue(this.component._value)}}},5975:(t,e,n)=>{n.d(e,{I:()=>r,g:()=>s});var i=n(3561),o=n(4898),a=n(2928);const s=t=>{const e="string"==typeof t._error&&t._error.length>0&&!0===t._touched,n="string"==typeof t._hint&&t._hint.length>0,i=[];return!0===e&&i.push(`${t._id}-error`),!0===n&&i.push(`${t._id}-hint`),{hasError:e,hasHint:n,ariaDescribedBy:i}};class l extends a.A{constructor(t,e,n){super(t,e,n),this.component=t}validateAlert(t){(0,i.z)(this.component,"_alert",t)}validateTouched(t){(0,i.J)(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateAlert(this.component._alert),this.validateTouched(this.component._touched)}}class r extends l{constructor(t,e,n){super(t,e,n),this.valueChangeListeners=[],this.onFacade={onBlur:this.onBlur.bind(this),onChange:this.onChange.bind(this),onClick:this.onClick.bind(this),onFocus:this.onFocus.bind(this)},this.component=t}validateAccessKey(t){(0,i.A)(this.component,"_accessKey",t)}validateAdjustHeight(t){(0,i.M)(this.component,t)}validateDisabled(t){(0,i.z)(this.component,"_disabled",t),!0===t&&(0,i.N)()}validateError(t){(0,i.A)(this.component,"_error",t)}validateHideError(t){(0,i.O)(this.component,t,{hooks:{afterPatch:()=>{this.component.state._hideError&&(0,i.Q)("Property hide-error for inputs: Only use when the error message is shown outside of the input component.")}}})}validateHideLabel(t){(0,i.P)(this.component,t,{hooks:{afterPatch:()=>{this.component.state._hideLabel&&(0,i.Q)("Property hide-label for inputs: Only use for exceptions like search inputs that are clearly identifiable by their context.")}}})}validateHint(t){(0,i.A)(this.component,"_hint",t)}validateId(t){(0,i.A)(this.component,"_id",t,{hooks:{afterPatch:()=>{this.setAttribute("id",this.formAssociated,this.component.state._id)}},minLength:1}),""!==t&&void 0!==t||(0,i.R)("Eine eindeutige ID an den Eingabefeldern ist nicht zwingend erforderlich, könnte aber für die E2E-Tests relevant sein.")}validateLabel(t){(0,i.S)(this.component,t,{required:!0})}validateOn(t){"object"==typeof t&&(0,i.k)(this.component,"_on",t)}validateSmartButton(t){(0,i.q)(t,(()=>{try{t=(0,i.r)(t)}catch(t){}(0,i.k)(this.component,"_smartButton",t)}))}validateTabIndex(t){(0,i.T)(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateAccessKey(this.component._accessKey),this.validateAdjustHeight(this.component._adjustHeight),this.validateError(this.component._error),this.validateDisabled(this.component._disabled),this.validateHideError(this.component._hideError),this.validateHideLabel(this.component._hideLabel),this.validateHint(this.component._hint),this.validateId(this.component._id),this.validateLabel(this.component._label),this.validateSmartButton(this.component._smartButton),this.validateOn(this.component._on),this.validateTabIndex(this.component._tabIndex)}onBlur(t){var e;this.component._alert=!0,this.component._touched=!0,(0,o.s)(t),(0,o.t)("blur",this.host),"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onBlur)&&this.component._on.onBlur(t)}onChange(t){var e;const n=t.target.value;(0,o.t)("change",this.host,n),this.setFormAssociatedValue(n),"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onChange)&&this.component._on.onChange(t,n),this.valueChangeListeners.forEach((t=>t(n)))}onClick(t){var e;(0,o.s)(t),(0,o.t)("click",this.host),"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onClick)&&this.component._on.onClick(t)}onFocus(t){var e;this.component._alert=!0,(0,o.s)(t),(0,o.t)("focus",this.host),"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onFocus)&&this.component._on.onFocus(t)}addValueChangeListener(t){this.valueChangeListeners.push(t)}}},4110:(t,e,n)=>{n.d(e,{I:()=>s});var i=n(3561),o=n(5975);const a=(t,e)=>{const n=t;"object"==typeof n&&null!==n&&((0,i.F)(n.right,1)&&(n.right={icon:n.right}),(0,i.F)(n.left,1)&&(n.left={icon:n.left}),e.set("_icons",n))};class s extends o.I{constructor(t,e,n){super(t,e,n),this.component=t}validateIcon(t){this.validateIcons(t)}validateIcons(t){(0,i.q)(t,(()=>{try{t=(0,i.r)(t)}catch(t){}(0,i.w)(this.component,"_icons",(t=>"object"==typeof t&&null!==t&&((0,i.F)(t.left,1)||(0,i.a3)(t.left)||(0,i.F)(t.right,1)||(0,i.a3)(t.right))),new Set(["KoliBriHorizontalIcon"]),t,{hooks:{beforePatch:a},required:!0})}))}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons||this.component._icon)}}},5636:(t,e,n)=>{n.d(e,{i:()=>a,n:()=>l,r:()=>s});var i=n(3561);const o=()=>{let t=(0,i.d)().KoliBri;return void 0===t&&(t={},Object.defineProperty((0,i.d)(),"KoliBri",{value:t,writable:!1})),t},a=()=>{(()=>{const t=(0,i.g)().querySelector('meta[name="kolibri"]');if(t&&t.hasAttribute("content")){const e=t.getAttribute("content");"string"==typeof e&&((0,i.s)(e.includes("dev-mode=true")),(0,i.b)(e.includes("experimental-mode=true")),(0,i.c)(e.includes("color-contrast-analysis=true")))}})(),void 0===o()?i.L.debug("\n\t,--. ,--.         ,--. ,--. ,-----.           ,--.\n\t|  .'   /  ,---.  |  | `--' |  |) /_  ,--.--. `--'\n\t|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.\n\t|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |\n\t`--' `--´  `---´  `--' `--' `------´  `--'    `--'\n\t🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | 2.0.9\n\t\t",{forceLog:!0}):console.warn("You can only initialize KoliBri once.")},s=()=>{!0!==o().adviceShown&&(Object.defineProperty(o(),"adviceShown",{get:function(){return!0}}),i.L.debug("\nYou are using the KoliBri component library. If you have any suggestions for improvement or find a problem, please contact us:\n\nTicket: https://github.com/public-ui/kolibri/issues/new/choose (for privacy reasons, please use email)\nEmail: kolibri@itzbund.de\n"))};let l=()=>Math.floor(16777215*Math.random()).toString(16);"test"===i.p&&(l=()=>"nonce")},4898:(t,e,n)=>{function i(t){t.stopImmediatePropagation(),t.stopPropagation()}function o(t,e,n){e&&function(t,e,n){const i=t.dispatchEvent(function(t,e){return new CustomEvent(`kol-${t}`,{bubbles:!0,cancelable:!0,composed:!0,detail:e})}(e,n))}(e,t,n)}function a(t){t.preventDefault(),i(t)}n.d(e,{p:()=>a,s:()=>i,t:()=>o})},2415:(t,e,n)=>{n.r(e),n.d(e,{kol_select:()=>p});var i=n(9305),o=n(3561),a=n(5636),s=n(4898),l=n(5975),r=n(6090),h=n(4110),c=n(9752);class d extends h.I{constructor(t,e,n){super(t,e,n),this.keyOptionMap=new Map,this.getOptionByKey=t=>this.keyOptionMap.get(t),this.isValueInOptions=(t,e)=>void 0!==e.find((e=>"string"==typeof e.value?e.value===t:!!Array.isArray(e.options)&&this.isValueInOptions(t,e.options))),this.filterValuesInOptions=(t,e)=>t.filter((t=>void 0!==this.isValueInOptions(t,e))),this.afterPatchOptions=(t,e,n,i)=>{"_value"===i&&this.setFormAssociatedValue(t)},this.beforePatchOptions=(t,e)=>{const n=e.has("_options")?e.get("_options"):this.component.state._options;if(Array.isArray(n)&&n.length>0){this.keyOptionMap.clear(),(0,c.f)(this.keyOptionMap,n);const t=e.has("_value")?e.get("_value"):this.component.state._value,i=this.filterValuesInOptions(Array.isArray(t)&&t.length>0?t:[],n);!1===this.component._multiple&&0===i.length?(e.set("_value",[n[0].value]),this.onStateChange()):Array.isArray(t)&&i.length<t.length&&(e.set("_value",i),this.onStateChange())}},this.component=t}validateOptions(t){(0,o.ak)(this.component,t,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateMultiple(t){(0,o.z)(this.component,"_multiple",t,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(t){(0,o.z)(this.component,"_required",t)}validateRows(t){(0,o.al)(this.component,t)}validateValue(t){(0,o.u)(this.component,"_value",(()=>!0),t,void 0,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}componentWillLoad(t){super.componentWillLoad(),this.onStateChange=()=>{if("function"==typeof t){const e=setTimeout((()=>{clearTimeout(e),t(o.Y)}))}},this.validateOptions(this.component._options),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateValue(this.component._value)}}const u=(t,e)=>Array.isArray(t)&&t.includes(e),p=class{getValue(){return t=this,null,e=function*(){return this._value},new Promise(((n,i)=>{var o=t=>{try{s(e.next(t))}catch(t){i(t)}},a=t=>{try{s(e.throw(t))}catch(t){i(t)}},s=t=>t.done?n(t.value):Promise.resolve(t.value).then(o,a);s((e=e.apply(t,null)).next())}));var t,e}renderOptgroup(t,e){var n;return(0,i.h)("optgroup",{disabled:t.disabled,label:t.label},null===(n=t.options)||void 0===n?void 0:n.map(((t,n)=>{const o=`${e}-${n}`;return Array.isArray(t.options)?this.renderOptgroup(t,o):(0,i.h)("option",{disabled:t.disabled,key:o,selected:u(this.state._value,t.value),value:o},t.label)})))}render(){const{ariaDescribedBy:t}=(0,l.g)(this.state),e=(0,o.I)(this.state._label);return(0,i.h)(i.H,{key:"2618c080341a8ba2c5d6066cbba57985a4b22f84",class:{"kol-select":!0,"has-value":this.state._hasValue}},(0,i.h)("kol-input",{key:"5a2f1ccab18352e83717e971c27f960c3c9e8b5a",class:{"hide-label":!!this.state._hideLabel,select:!0},_accessKey:this.state._accessKey,_disabled:this.state._disabled,_error:this.state._error,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_required:this.state._required,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()},role:"presentation"},(0,i.h)("span",{key:"f3a3c5638ff9441925491880d5b0c4f08160ecb9",slot:"label"},e?(0,i.h)("slot",{name:"expert"}):"string"==typeof this.state._accessKey?(0,i.h)(i.F,null,(0,i.h)(r.I,{accessKey:this.state._accessKey,label:this.state._label})," ",(0,i.h)("span",{class:"access-key-hint","aria-hidden":"true"},this.state._accessKey)):(0,i.h)("span",null,this.state._label)),(0,i.h)("div",{key:"64aff4445074a7606fabeb6ae439d4361ef475b5",slot:"input"},(0,i.h)("select",{key:"9dbad0338a46070a9be1c4b0035439bfb659a3f6",ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":t.length>0?t.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,multiple:this.state._multiple,name:this.state._name,required:this.state._required,size:this.state._rows,spellcheck:"false",onClick:this.controller.onFacade.onClick,onBlur:this.controller.onFacade.onBlur,onFocus:this.controller.onFacade.onFocus,onChange:this.onChange},this.state._options.map(((t,e)=>{const n=`-${e}`;return Array.isArray(t.options)?this.renderOptgroup(t,n):(0,i.h)("option",{disabled:t.disabled,key:n,selected:u(this.state._value,t.value),value:n},t.label)}))))))}constructor(t){(0,i.r)(this,t),this.catchRef=t=>{this.ref=t,(0,o.h)(this.host,this.ref)},this.onChange=t=>{var e,n;this._value=Array.from((null===(e=this.ref)||void 0===e?void 0:e.options)||[]).filter((t=>!0===t.selected)).map((t=>{var e;return null===(e=this.controller.getOptionByKey(t.value))||void 0===e?void 0:e.value})),(0,s.s)(t),(0,s.t)("change",this.host,this._value),this.controller.setFormAssociatedValue(this._value),"function"==typeof(null===(n=this.state._on)||void 0===n?void 0:n.onChange)&&this.state._on.onChange(t,this._value)},this._accessKey=void 0,this._alert=!0,this._disabled=!1,this._error=void 0,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._multiple=!1,this._name=void 0,this._on=void 0,this._options=void 0,this._required=!1,this._rows=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hasValue:!1,_hideError:!1,_id:`id-${(0,a.n)()}`,_label:"",_multiple:!1,_options:[],_value:[]},this.controller=new d(this,"select",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateMultiple(t){this.controller.validateMultiple(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateOptions(t){this.controller.validateOptions(t)}validateRequired(t){this.controller.validateRequired(t)}validateRows(t){this.controller.validateRows(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(this.onChange),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}get host(){return(0,i.g)(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_rows:["validateRows"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};p.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: 1rem;\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {}"}}}]);

package/dist/2594.js

@@ -1,2 +0,0 @@
-/*! For license information please see 2594.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[2594],{6090:(e,t,n)=>{n.d(t,{I:()=>o});var i=n(9305);const o=({accessKey:e,label:t})=>{let[n,...o]=t.split(e);return 0===o.length&&(e=e.toUpperCase(),[n,...o]=t.split(e)),0===o.length&&(e=e.toLowerCase(),[n,...o]=t.split(e)),(0,i.h)(i.F,null,n,o.length?(0,i.h)(i.F,null,(0,i.h)("u",null,e),o.join(e)):null)}},2928:(e,t,n)=>{n.d(t,{A:()=>o});var i=n(3561);class o{constructor(e,t,n){var o,a,s,l;if(this.experimentalMode=(0,i.Z)(),this.setFormAssociatedValue=e=>{var t;const n=null===(t=this.formAssociated)||void 0===t?void 0:t.getAttribute("name");null!==n&&""!==n||(0,i.R)(` The form field (${this.type}) must have a name attribute to be form-associated. Please define the _name attribute.`);const o=this.tryToStringifyValue(e);this.syncValue(e,o,this.formAssociated),this.syncValue(e,o,this.syncToOwnInput)},this.component=e,this.host=this.findHostWithShadowRoot(n),this.type=t,this.experimentalMode&&("KOL-BUTTON"===(l=null===(o=this.host)||void 0===o?void 0:o.tagName)||"KOL-INPUT-CHECKBOX"===l||"KOL-INPUT-COLOR"===l||"KOL-INPUT-DATE"===l||"KOL-INPUT-EMAIL"===l||"KOL-INPUT-FILE"===l||"KOL-INPUT-NUMBER"===l||"KOL-INPUT-PASSWORD"===l||"KOL-INPUT-RADIO"===l||"KOL-INPUT-RANGE"===l||"KOL-INPUT-TEXT"===l||"KOL-SELECT"===l||"KOL-TEXTAREA"===l)){switch(null===(a=this.host)||void 0===a||a.querySelectorAll("input,select,textarea").forEach((e=>{var t;null===(t=this.host)||void 0===t||t.removeChild(e)})),this.type){case"button":case"color":case"date":case"email":case"file":case"number":case"password":case"radio":case"range":case"text":this.formAssociated=document.createElement("input"),this.formAssociated.setAttribute("type",this.type);break;case"select":this.formAssociated=document.createElement("select"),this.formAssociated.setAttribute("multiple","");break;case"textarea":this.formAssociated=document.createElement("textarea");break;default:this.formAssociated=document.createElement("input"),this.formAssociated.setAttribute("type","hidden")}this.formAssociated.setAttribute("aria-hidden","true"),this.formAssociated.setAttribute("data-form-associated",""),this.formAssociated.setAttribute("hidden",""),null===(s=this.host)||void 0===s||s.appendChild(this.formAssociated)}}findHostWithShadowRoot(e){for(;null===(null==e?void 0:e.shadowRoot)&&e!==document.body;)(e=null==e?void 0:e.parentNode).host&&(e=e.host);return e}setAttribute(e,t,n){if(this.experimentalMode)try{if("boolean"!=typeof(n="object"==typeof n&&null!==n?JSON.stringify(n):n)&&"number"!=typeof n&&"string"!=typeof n)throw new Error("Invalid value type: "+typeof n);null==t||t.setAttribute(e,`${n}`)}catch(n){null==t||t.removeAttribute(e)}}tryToStringifyValue(e){try{return"object"==typeof e&&null!==e?JSON.stringify(e).toString():null==e?null:e.toString()}catch(e){return(0,i.$)(`The form field raw value is not able to stringify! ${e}`),""}}syncValue(e,t,n){if(n)switch(this.type){case"file":n.files=e;break;case"select":n.querySelectorAll("option").forEach((e=>{n.removeChild(e)})),Array.isArray(e)&&e.forEach((e=>{const t=this.tryToStringifyValue(e);if("string"==typeof t){const e=document.createElement("option");e.setAttribute("value",t),e.setAttribute("selected",""),n.appendChild(e)}}));break;default:"string"==typeof t?(n.setAttribute("value",t),n.value=t):(n.removeAttribute("value"),n.value="")}}validateName(e){(0,i.a0)(this.component,e,{hooks:{afterPatch:()=>{this.setAttribute("name",this.formAssociated,this.component.state._name)}}}),void 0===e&&(0,i.R)("Ein Name am Eingabefeldern oder Schalter ist nicht zwingend erforderlich, kann aber für die Autocomplete-Funktion und für das statische Versenden des Eingabefeldes relevant sein.")}validateSyncValueBySelector(e){if(this.experimentalMode&&"string"==typeof e){const t=document.querySelector(e);t&&(this.syncToOwnInput=t)}}componentWillLoad(){this.validateName(this.component._name),this.validateSyncValueBySelector(this.component._syncValueBySelector)}}},9752:(e,t,n)=>{n.d(t,{I:()=>s,a:()=>l,f:()=>a});var i=n(3561),o=n(5975);const a=(e,t,n="")=>{t.forEach(((t,i)=>{const o=`${n}-${i}`;"object"==typeof t&&null!==t&&"string"==typeof t.label&&t.label.length>0&&(Array.isArray(t.options)?a(e,t.options,o):e.set(o,t))}))};class s extends o.I{constructor(e,t,n){super(e,t,n),this.component=e}validateRequired(e){(0,i.U)(this.component,e)}componentWillLoad(){super.componentWillLoad(),this.validateRequired(this.component._required)}}class l extends s{constructor(e,t,n){super(e,t,n),this.keyOptionMap=new Map,this.getOptionByKey=e=>this.keyOptionMap.get(e),this.isValueInOptions=(e,t)=>void 0!==t.find((t=>t.value===e)),this.afterPatchOptions=(e,t,n,i)=>{"_value"===i&&this.setFormAssociatedValue(e)},this.beforePatchOptions=(e,t)=>{const n=t.has("_options")?t.get("_options"):this.component.state._options;if(Array.isArray(n)&&n.length>0){this.keyOptionMap.clear(),a(this.keyOptionMap,n);const e=t.has("_value")?t.get("_value"):this.component.state._value;!1===this.isValueInOptions(e,n)&&(t.set("_value",n[0].value),this.onStateChange())}},this.component=e}validateOrientation(e){(0,i.w)(this.component,"_orientation",(e=>"string"==typeof e&&i.V.includes(e)),new Set([`Orientation {${i.V.join(", ")}`]),e,{defaultValue:"vertical"})}validateOptions(e){(0,i.W)(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateValue(e){e=(0,i.X)(e),e=Array.isArray(e)?e[0]:e,(0,i.k)(this.component,"_value",e,{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions})}componentWillLoad(e){super.componentWillLoad(),this.onStateChange=()=>{if("function"==typeof e){const t=setTimeout((()=>{clearTimeout(t),e(i.Y)}))}},this.validateOrientation(this.component._orientation),this.validateOptions(this.component._options),this.validateValue(this.component._value)}}},5975:(e,t,n)=>{n.d(t,{I:()=>r,g:()=>s});var i=n(3561),o=n(4898),a=n(2928);const s=e=>{const t="string"==typeof e._error&&e._error.length>0&&!0===e._touched,n="string"==typeof e._hint&&e._hint.length>0,i=[];return!0===t&&i.push(`${e._id}-error`),!0===n&&i.push(`${e._id}-hint`),{hasError:t,hasHint:n,ariaDescribedBy:i}};class l extends a.A{constructor(e,t,n){super(e,t,n),this.component=e}validateAlert(e){(0,i.z)(this.component,"_alert",e)}validateTouched(e){(0,i.J)(this.component,e)}componentWillLoad(){super.componentWillLoad(),this.validateAlert(this.component._alert),this.validateTouched(this.component._touched)}}class r extends l{constructor(e,t,n){super(e,t,n),this.valueChangeListeners=[],this.onFacade={onBlur:this.onBlur.bind(this),onChange:this.onChange.bind(this),onClick:this.onClick.bind(this),onFocus:this.onFocus.bind(this)},this.component=e}validateAccessKey(e){(0,i.A)(this.component,"_accessKey",e)}validateAdjustHeight(e){(0,i.M)(this.component,e)}validateDisabled(e){(0,i.z)(this.component,"_disabled",e),!0===e&&(0,i.N)()}validateError(e){(0,i.A)(this.component,"_error",e)}validateHideError(e){(0,i.O)(this.component,e,{hooks:{afterPatch:()=>{this.component.state._hideError&&(0,i.Q)("Property hide-error for inputs: Only use when the error message is shown outside of the input component.")}}})}validateHideLabel(e){(0,i.P)(this.component,e,{hooks:{afterPatch:()=>{this.component.state._hideLabel&&(0,i.Q)("Property hide-label for inputs: Only use for exceptions like search inputs that are clearly identifiable by their context.")}}})}validateHint(e){(0,i.A)(this.component,"_hint",e)}validateId(e){(0,i.A)(this.component,"_id",e,{hooks:{afterPatch:()=>{this.setAttribute("id",this.formAssociated,this.component.state._id)}},minLength:1}),""!==e&&void 0!==e||(0,i.R)("Eine eindeutige ID an den Eingabefeldern ist nicht zwingend erforderlich, könnte aber für die E2E-Tests relevant sein.")}validateLabel(e){(0,i.S)(this.component,e,{required:!0})}validateOn(e){"object"==typeof e&&(0,i.k)(this.component,"_on",e)}validateSmartButton(e){(0,i.q)(e,(()=>{try{e=(0,i.r)(e)}catch(e){}(0,i.k)(this.component,"_smartButton",e)}))}validateTabIndex(e){(0,i.T)(this.component,e)}componentWillLoad(){super.componentWillLoad(),this.validateAccessKey(this.component._accessKey),this.validateAdjustHeight(this.component._adjustHeight),this.validateError(this.component._error),this.validateDisabled(this.component._disabled),this.validateHideError(this.component._hideError),this.validateHideLabel(this.component._hideLabel),this.validateHint(this.component._hint),this.validateId(this.component._id),this.validateLabel(this.component._label),this.validateSmartButton(this.component._smartButton),this.validateOn(this.component._on),this.validateTabIndex(this.component._tabIndex)}onBlur(e){var t;this.component._alert=!0,this.component._touched=!0,(0,o.s)(e),(0,o.t)("blur",this.host),"function"==typeof(null===(t=this.component._on)||void 0===t?void 0:t.onBlur)&&this.component._on.onBlur(e)}onChange(e){var t;const n=e.target.value;(0,o.t)("change",this.host,n),this.setFormAssociatedValue(n),"function"==typeof(null===(t=this.component._on)||void 0===t?void 0:t.onChange)&&this.component._on.onChange(e,n),this.valueChangeListeners.forEach((e=>e(n)))}onClick(e){var t;(0,o.s)(e),(0,o.t)("click",this.host),"function"==typeof(null===(t=this.component._on)||void 0===t?void 0:t.onClick)&&this.component._on.onClick(e)}onFocus(e){var t;this.component._alert=!0,(0,o.s)(e),(0,o.t)("focus",this.host),"function"==typeof(null===(t=this.component._on)||void 0===t?void 0:t.onFocus)&&this.component._on.onFocus(e)}addValueChangeListener(e){this.valueChangeListeners.push(e)}}},5636:(e,t,n)=>{n.d(t,{i:()=>a,n:()=>l,r:()=>s});var i=n(3561);const o=()=>{let e=(0,i.d)().KoliBri;return void 0===e&&(e={},Object.defineProperty((0,i.d)(),"KoliBri",{value:e,writable:!1})),e},a=()=>{(()=>{const e=(0,i.g)().querySelector('meta[name="kolibri"]');if(e&&e.hasAttribute("content")){const t=e.getAttribute("content");"string"==typeof t&&((0,i.s)(t.includes("dev-mode=true")),(0,i.b)(t.includes("experimental-mode=true")),(0,i.c)(t.includes("color-contrast-analysis=true")))}})(),void 0===o()?i.L.debug("\n\t,--. ,--.         ,--. ,--. ,-----.           ,--.\n\t|  .'   /  ,---.  |  | `--' |  |) /_  ,--.--. `--'\n\t|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.\n\t|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |\n\t`--' `--´  `---´  `--' `--' `------´  `--'    `--'\n\t🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | 2.0.9\n\t\t",{forceLog:!0}):console.warn("You can only initialize KoliBri once.")},s=()=>{!0!==o().adviceShown&&(Object.defineProperty(o(),"adviceShown",{get:function(){return!0}}),i.L.debug("\nYou are using the KoliBri component library. If you have any suggestions for improvement or find a problem, please contact us:\n\nTicket: https://github.com/public-ui/kolibri/issues/new/choose (for privacy reasons, please use email)\nEmail: kolibri@itzbund.de\n"))};let l=()=>Math.floor(16777215*Math.random()).toString(16);"test"===i.p&&(l=()=>"nonce")},4898:(e,t,n)=>{function i(e){e.stopImmediatePropagation(),e.stopPropagation()}function o(e,t,n){t&&function(e,t,n){const i=e.dispatchEvent(function(e,t){return new CustomEvent(`kol-${e}`,{bubbles:!0,cancelable:!0,composed:!0,detail:t})}(t,n))}(t,e,n)}function a(e){e.preventDefault(),i(e)}n.d(t,{p:()=>a,s:()=>i,t:()=>o})},2794:(e,t,n)=>{n.d(t,{F:()=>o});var i=n(9305);const o=({_alert:e,_error:t,_hideError:n,_id:o})=>(0,i.h)("kol-alert-wc",{"aria-hidden":"true",id:`${o}-error`,_alert:e,_type:"error",class:{error:!0,"visually-hidden":!0===n}},t)},2594:(e,t,n)=>{n.r(t),n.d(t,{kol_input_radio:()=>c});var i=n(9305),o=n(3561),a=n(5636),s=n(4898),l=n(5975),r=n(6090),d=n(9752),h=n(2794);const c=class{getValue(){return e=this,null,t=function*(){return this.currentValue},new Promise(((n,i)=>{var o=e=>{try{s(t.next(e))}catch(e){i(e)}},a=e=>{try{s(t.throw(e))}catch(e){i(e)}},s=e=>e.done?n(e.value):Promise.resolve(e.value).then(o,a);s((t=t.apply(e,null)).next())}));var e,t}render(){const{ariaDescribedBy:e,hasError:t}=(0,l.g)(this.state),n=(0,o.I)(this.state._label);return(0,i.h)(i.H,{key:"f2103803d618bc94285670b8cc2c9270cdb75bf1",class:"kol-input-radio"},(0,i.h)("fieldset",{key:"a9cda38b082597f6e729260be843353ea1344d5a",class:{fieldset:!0,disabled:!0===this.state._disabled,error:!0===t,required:!0===this.state._required,"hidden-error":!0===this._hideError,[this.state._orientation]:!0}},(0,i.h)("legend",{key:"638a114e07fa08edadd4e5150daeafc120f5df8e",class:"block w-full mb-1 leading-normal"},(0,i.h)("span",{key:"df3d7306912e893678d3ceb318be13a79d7a39c6"},(0,i.h)("span",{key:"e3609b48b053e33bc37d26b36329371dd08ded02",slot:"label"},n?(0,i.h)("slot",{name:"expert"}):"string"==typeof this._accessKey?(0,i.h)(r.I,{accessKey:this._accessKey,label:this._label}):this._label))),this.state._options.map(((t,n)=>{const o=`${this.state._id}-${n}`,a=`radio-${n}`;return(0,i.h)("kol-input",{class:{radio:!0,disabled:Boolean(this.state._disabled||t.disabled)},key:o,_accessKey:this.state._accessKey,_disabled:this.state._disabled||t.disabled,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_id:o,_label:t.label,_renderNoLabel:!0,_required:this.state._required,_slotName:a,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched},(0,i.h)("div",{slot:a,class:"radio-input-wrapper"},(0,i.h)("input",Object.assign({ref:this.state._value===t.value?this.catchRef:void 0,title:"",accessKey:this.state._accessKey,"aria-describedby":e.length>0?e.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof t.label?t.label:void 0,type:"radio",id:o,checked:this.state._value===t.value,name:this.state._name||this.state._id,disabled:this.state._disabled||t.disabled,required:this.state._required,tabIndex:this.state._tabIndex,value:`-${n}`},this.controller.onFacade,{onChange:this.onChange,onClick:void 0})),(0,i.h)("label",{class:"radio-label",htmlFor:`${o}`,style:{height:this.state._hideLabel?"0":void 0,margin:this.state._hideLabel?"0":void 0,padding:this.state._hideLabel?"0":void 0,visibility:this.state._hideLabel?"hidden":void 0}},(0,i.h)("span",null,(0,i.h)("span",{class:"radio-label-span-inner"},t.label)))))})),t&&(0,i.h)(h.F,{_alert:this.state._alert,_hideError:this.state._hideError,_error:this.state._error,_id:this.state._id})))}constructor(e){(0,i.r)(this,e),this.catchRef=e=>{(0,o.h)(this.host,e)},this.onChange=e=>{var t;if(e.target instanceof HTMLInputElement){const n=this.controller.getOptionByKey(e.target.value);void 0!==n&&((0,s.s)(e),(0,s.t)("change",this.host,n.value),this.controller.setFormAssociatedValue(n.value),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onChange)&&this.state._on.onChange(e,n.value),this.currentValue=n.value)}},this._accessKey=void 0,this._alert=!0,this._disabled=!1,this._error=void 0,this._hideError=!1,this._hideLabel=!1,this._hint="",this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._options=void 0,this._orientation="vertical",this._required=!1,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hideError:!1,_id:`id-${(0,a.n)()}`,_label:"",_options:[],_orientation:"vertical"},this.controller=new d.a(this,"radio",this.host)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAlert(e){this.controller.validateAlert(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateError(e){this.controller.validateError(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHideError(e){this.controller.validateHideError(e)}validateHint(e){this.controller.validateHint(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateOptions(e){this.controller.validateOptions(e)}validateOrientation(e){this.controller.validateOrientation(e)}validateRequired(e){this.controller.validateRequired(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.currentValue=this._value,this.controller.componentWillLoad(this.onChange)}get host(){return(0,i.g)(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hideLabel:["validateHideLabel"],_hideError:["validateHideError"],_hint:["validateHint"],_id:["validateId"],_label:["validateLabel"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_orientation:["validateOrientation"],_required:["validateRequired"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};c.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: 1rem;\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n  }\n}\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed !important;\n    opacity: 0.5 !important;\n    outline: none !important;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    /* Visible with forced colors */\n    outline: transparent solid 1px;\n  }\n}\n@layer kol-component {\n  :host {\n    --border-width: 2px;\n    --input-size: 1.5em;\n  }\n  .kol-input .icons {\n    display: none;\n  }\n  label {\n    cursor: pointer;\n  }\n  input {\n    appearance: none;\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: 100%;\n    cursor: pointer;\n    display: flex;\n    height: var(--input-size);\n    margin: 0;\n    min-height: var(--input-size);\n    min-width: var(--input-size);\n    padding: 0;\n    width: var(--input-size);\n  }\n  input:before {\n    border-radius: 100%;\n    content: \"\";\n    margin: auto;\n    height: calc(var(--input-size) / 2);\n    width: calc(var(--input-size) / 2);\n  }\n  input:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    input:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background: highlight !important;\n    }\n  }\n  fieldset {\n    display: flex;\n  }\n  fieldset.vertical {\n    flex-direction: column;\n  }\n  fieldset .input-slot {\n    align-items: center;\n    display: flex;\n  }\n  /* required star is on fieldset legend */\n  .required label > span::after {\n    content: \"\";\n  }\n}"}}}]);