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

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

@@ -16,6 +16,7 @@ import {
 	KolInputRange,
 	KolInputText,
 	KolSelect,
+	KolSingleSelect,
 	KolCombobox,
 	KolTextarea,
 } from '@public-ui/react';
@@ -33,6 +34,7 @@ type Props = {
 	InputComponent: React.ComponentType<any>;
 	inputProps: { [key: string]: any };
 	formatter?: (value: any) => string;
+	testId?: string;
 };
 const Scenario = (props: Props) => {
 	const ref = useRef<HTMLStencilElement & { getValue: () => Promise<any> }>();
@@ -68,7 +70,7 @@ const Scenario = (props: Props) => {
 	);
 
 	return (
-		<div className="grid grid-cols-3 items-end gap-4">
+		<div className="grid grid-cols-3 items-end gap-4" data-testid={props.testId}>
 			<props.InputComponent ref={ref} _on={eventListeners} {...props.inputProps} />
 			<KolButton
 				_label="getValue()"
@@ -108,13 +110,18 @@ export const InputsGetValue: FC = () => {
 					</KolCard>
 
 					<div className="grid gap-4">
-						<Scenario InputComponent={KolInputText} inputProps={{ _label: 'InputText' }} />
-						<Scenario InputComponent={KolInputCheckbox} inputProps={{ _label: 'KolInputCheckbox (value)', _value: 'Checkbox True Value' }} />
-						<Scenario InputComponent={KolInputCheckbox} inputProps={{ _label: 'KolInputCheckbox (boolean)' }} />
-						<Scenario InputComponent={KolInputColor} inputProps={{ _label: 'KolInputColor' }} />
-						<Scenario InputComponent={KolInputDate} inputProps={{ _label: 'KolInputDate' }} />
-						<Scenario InputComponent={KolInputEmail} inputProps={{ _label: 'KolInputEmail' }} />
+						<Scenario testId="scenario-inputText" InputComponent={KolInputText} inputProps={{ _label: 'InputText' }} />
 						<Scenario
+							testId="scenario-inputCheckboxString"
+							InputComponent={KolInputCheckbox}
+							inputProps={{ _label: 'KolInputCheckbox (value)', _value: 'Checkbox True Value' }}
+						/>
+						<Scenario testId="scenario-inputCheckboxBoolean" InputComponent={KolInputCheckbox} inputProps={{ _label: 'KolInputCheckbox (boolean)' }} />
+						<Scenario testId="scenario-inputColor" InputComponent={KolInputColor} inputProps={{ _label: 'KolInputColor' }} />
+						<Scenario testId="scenario-inputDate" InputComponent={KolInputDate} inputProps={{ _label: 'KolInputDate' }} />
+						<Scenario testId="scenario-inputEmail" InputComponent={KolInputEmail} inputProps={{ _label: 'KolInputEmail' }} />
+						<Scenario
+							testId="scenario-inputFile"
 							InputComponent={KolInputFile}
 							inputProps={{ _label: 'KolInputFile' }}
 							formatter={(value) =>
@@ -125,10 +132,11 @@ export const InputsGetValue: FC = () => {
 									: JSON.stringify(value)
 							}
 						/>
-						<Scenario InputComponent={KolInputNumber} inputProps={{ _label: 'KolInputNumber' }} />
-						<Scenario InputComponent={KolInputPassword} inputProps={{ _label: 'KolInputPassword' }} />
-						<Scenario InputComponent={KolInputRange} inputProps={{ _label: 'KolInputRange' }} />
+						<Scenario testId="scenario-inputNumber" InputComponent={KolInputNumber} inputProps={{ _label: 'KolInputNumber' }} />
+						<Scenario testId="scenario-inputPassword" InputComponent={KolInputPassword} inputProps={{ _label: 'KolInputPassword' }} />
+						<Scenario testId="scenario-inputRange" InputComponent={KolInputRange} inputProps={{ _label: 'KolInputRange' }} />
 						<Scenario
+							testId="scenario-inputRadio"
 							InputComponent={KolInputRadio}
 							inputProps={{
 								_label: 'KolInputRadio',
@@ -142,6 +150,7 @@ export const InputsGetValue: FC = () => {
 							}}
 						/>
 						<Scenario
+							testId="scenario-select"
 							InputComponent={KolSelect}
 							inputProps={{
 								_label: 'KolSelect',
@@ -153,6 +162,20 @@ export const InputsGetValue: FC = () => {
 							}}
 						/>
 						<Scenario
+							testId="scenario-singleSelect"
+							InputComponent={KolSingleSelect}
+							inputProps={{
+								_label: 'KolSingleSelect',
+								_options: [
+									{ label: 'New York', value: 'New York' },
+									{ label: 'Rio de Janeiro', value: 'Rio de Janeiro' },
+									{ label: 'Rosenheim', value: 'Rosenheim' },
+								],
+								_value: 'Rosenheim',
+							}}
+						/>
+						<Scenario
+							testId="scenario-combobox"
 							InputComponent={KolCombobox}
 							inputProps={{
 								_label: 'KolCombobox',
@@ -161,12 +184,14 @@ export const InputsGetValue: FC = () => {
 							}}
 						/>
 						<Scenario
+							testId="scenario-textarea"
 							InputComponent={KolTextarea}
 							inputProps={{
 								_label: 'KolTextarea',
 							}}
 						/>
 						<Scenario
+							testId="scenario-button"
 							InputComponent={KolButton}
 							inputProps={{
 								_label: 'KolButton',
@@ -175,6 +200,7 @@ export const InputsGetValue: FC = () => {
 							}}
 						/>
 						<Scenario
+							testId="scenario-buttonLink"
 							InputComponent={KolButtonLink}
 							inputProps={{
 								_label: 'KolButtonLink',

package/src/scenarios/routes.ts

@@ -5,6 +5,7 @@ import { DisabledInteractiveElements } from './disabled-interactive-elements';
 import { InputsGetValue } from './inputs-get-value';
 import { StaticForm } from './static-form';
 import { FocusElements } from './focus-elements';
+import { TableHorizontalScrollAdvanced } from './horizontal-scrollbar-advanced';
 
 export const SCENARIO_ROUTES: Routes = {
 	scenarios: {
@@ -14,5 +15,6 @@ export const SCENARIO_ROUTES: Routes = {
 		'static-form': StaticForm,
 		'disabled-interactive-scenario': DisabledInteractiveElements,
 		'focus-elements': FocusElements,
+		'table-horizontal-scrollbar-advanced': TableHorizontalScrollAdvanced,
 	},
 };

package/src/scenarios/static-form.tsx

@@ -11,6 +11,7 @@ import {
 	KolInputRange,
 	KolInputText,
 	KolSelect,
+	KolSingleSelect,
 	KolCombobox,
 	KolTextarea,
 } from '@public-ui/react';
@@ -92,6 +93,14 @@ export const StaticForm: FC = () => {
 					]}
 					_rows={2}
 				/>
+				<KolSingleSelect
+					_name="singleSelect"
+					_label="Single Select"
+					_options={[
+						{ label: 'Option A', value: 'A' },
+						{ label: 'Option B', value: 'B' },
+					]}
+				/>
 				<KolCombobox _name="combobox" _label="Combobox" _suggestions={COUNTRY_SUGGESTIONS} />
 				<KolTextarea _name="textarea" _label="Textarea" _rows={5} />
 				<div className="flex flex-wrap gap-4">

package/src/shares/constants.ts

@@ -1,4 +1,4 @@
 export const PUBLIC_DOC_COMPONENT_URL = 'https://public-ui.github.io/docs/components';
 export const PUBLIC_CODE_COMPONENT_URL = 'https://github.com/public-ui/kolibri/blob/develop/packages/samples/react/src/components';
-export const ERROR_MSG = 'Ich bin eine Fehlermeldung!';
-export const HINT_MSG = 'Ich bin ein Hinweis.';
+export const ERROR_MSG = 'I am an error message!';
+export const HINT_MSG = 'I am a hint.';

package/src/shares/routes.ts

@@ -49,6 +49,7 @@ import { SCENARIO_ROUTES } from '../scenarios/routes';
 import { Routes } from './types';
 import { TREE_ROUTES } from '../components/tree/routes';
 import { COMBOBOX_ROUTES } from '../components/combobox/routes';
+import { SINGLE_SELECT_ROUTES } from '../components/single-select/routes';
 
 export const ROUTES: Routes = {
 	...HANDOUT_ROUTES,
@@ -93,6 +94,7 @@ export const ROUTES: Routes = {
 	...SELECT_ROUTES,
 	...SKIP_NAV_ROUTES,
 	...SPIN_ROUTES,
+	...SINGLE_SELECT_ROUTES,
 	...SPLIT_BUTTON_ROUTES,
 	...TABLE_ROUTES,
 	...TABS_ROUTES,

package/src/style.scss

@@ -27,12 +27,30 @@ hr {
 @media (min-width: 1024px) {
 	.app-container {
 		display: grid;
-		grid-template-columns: 360px auto;
+		grid-template-columns: 360px calc(100% - 360px);
+		min-height: 100vh;
 		height: 100%;
 	}
 
 	.app-sidebar {
 		border-right: 1px solid gray;
+		position: relative;
+
+		& .scrollable-container-wrapper {
+			position: fixed;
+			top: 0;
+			bottom: 0;
+			left: 0;
+			width: 330px;
+			margin: 1rem;
+			flex-direction: column;
+			display: flex;
+
+			& .scrollable-container {
+				flex: 1 auto;
+				overflow: auto;
+			}
+		} 
 	}
 }
 

package/tsconfig.json

@@ -27,5 +27,5 @@
 		"jsxFactory": "React.createElement",
 		"jsxFragmentFactory": "React.Fragment"
 	},
-	"include": ["src/**/*"]
+	"include": ["src/**/*", "e2e/**/*"]
 }

package/dist/2687.js

@@ -1,2 +0,0 @@
-/*! For license information please see 2687.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[2687],{8447:(e,t,i)=>{i.d(t,{i:()=>s,n:()=>c,r:()=>a});var o=i(397),n=i(4997),r=i(6448);const l=()=>{let e=(0,r.d)().KoliBri;return void 0===e&&(e={},Object.defineProperty((0,r.d)(),"KoliBri",{value:e,writable:!1})),e},s=()=>{(()=>{const e=(0,r.g)().querySelector('meta[name="kolibri"]');if(e&&e.hasAttribute("content")){const t=e.getAttribute("content");"string"==typeof t&&((0,r.s)(t.includes("dev-mode=true")),(0,r.b)(t.includes("experimental-mode=true")),(0,r.c)(t.includes("color-contrast-analysis=true")))}})(),r.L.debug(`\n,--. ,--.         ,--. ,--. ,-----.           ,--.\n|  .'   /  ,---.  |  | \`--' |  |) /_  ,--.--. \`--'\n|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.\n|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |\n\`--' \`--´  \`---´  \`--' \`--' \`------´  \`--'    \`--'\n🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | ${o.E.kolibriVersion}\n\t`,{forceLog:!0})},a=()=>{!0!==l().adviceShown&&(Object.defineProperty(l(),"adviceShown",{get:function(){return!0}}),r.L.debug("\nYou are using the KoliBri component library. If you have any suggestions for improvement or find a problem, please contact us:\n\nTicket: https://github.com/public-ui/kolibri/issues/new/choose (for privacy reasons, please use email)\nEmail: kolibri@itzbund.de\n"))};let c=()=>Math.floor(16777215*Math.random()).toString(16);"test"===n.p&&(c=()=>"nonce")},2687:(e,t,i)=>{i.r(t),i.d(t,{initialize:()=>a});var o=i(8447),n=i(6448),r=i(479);function l(e,t){try{Object.defineProperty((()=>{let e=(0,n.d)().KoliBri;return void 0===e&&(e={},Object.defineProperty((0,n.d)(),"KoliBri",{value:e,writable:!1})),e})(),e,{get:function(){return t}})}catch(t){n.L.debug(`KoliBri property ${e} is already bind.`)}}const s=(e,t)=>n.L.debug(`${e} ${t?"":"not "}activated`),a=()=>{if((0,o.i)(),(0,n.e)()){(0,o.r)(),l("a11yColorContrast",r.z),l("querySelector",r.v),l("querySelectorAll",r.A),l("querySelectorColors",r.B),l("utils",(function(){return r.C})),l("parseJson",r.p),l("stringifyJson",r.D);const e=(0,n.g)().body,t=(0,n.g)().createElement("svg");if(t.setAttribute("aria-label","KoliBri-DevTools"),t.setAttribute("xmlns","http://www.w3.org/2000/svg"),t.setAttribute("role","toolbar"),t.setAttribute("style","position: fixed;color: black;font-size: 200%;bottom: 0.25rem;right: 0.25rem;"),t.innerHTML='<svg\n  xmlns="http://www.w3.org/2000/svg"\n  width="50"\n  height="50"\n  viewBox="0 0 600 600"\n>\n  <path d="M353 322L213 304V434L353 322Z" fill="#047" />\n  <path d="M209 564V304L149 434L209 564Z" fill="#047" />\n  <path d="M357 316L417 250L361 210L275 244L357 316Z" fill="#047" />\n  <path d="M353 318L35 36L213 300L353 318Z" fill="#047" />\n  <path d="M329 218L237 92L250 222L272 241L329 218Z" fill="#047" />\n  <path d="M391 286L565 272L421 252L391 286Z" fill="#047" />\n</svg>',(0,n.g)().body.appendChild(t),s("Development mode",(0,n.e)()),s("Experimental mode",(0,n.a)()),s("Color contrast analysis",(0,n.f)()),(0,n.f)()){const t=setTimeout((()=>{clearTimeout(t),setInterval((()=>{r.C.queryHtmlElementColors((0,n.g)().createElement("div"),(0,r.z)(e),!1,!1)}),1e4)}),2500)}}}},4997:(e,t,i)=>{i.d(t,{h:()=>n,p:()=>o,s:()=>r});let o="development";try{o="production"}catch(e){o="production"}const n=(e,t,i)=>{if(e&&t&&"string"==typeof i){const o=e.querySelector(`[slot="${i}"]`);o&&t.appendChild(o)}},r=e=>""===e}}]);

package/dist/9061.js

@@ -1,2 +0,0 @@
-/*! For license information please see 9061.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[9061],{7696:(t,e,o)=>{o.d(e,{I:()=>n});var i=o(397);const n=({accessKey:t,label:e})=>{let[o,...n]=e.split(t);return 0===n.length&&(t=t.toUpperCase(),[o,...n]=e.split(t)),0===n.length&&(t=t.toLowerCase(),[o,...n]=e.split(t)),(0,i.h)(i.F,null,o,n.length?(0,i.h)(i.F,null,(0,i.h)("u",null,t),n.join(t)):null)}},7914:(t,e,o)=>{o.d(e,{a:()=>a,v:()=>n});var i=o(479);const n=(t,e,o)=>{(0,i.w)(t,e,(t=>"string"==typeof t&&s.includes(t)),new Set(s),o,{defaultValue:"top"})},s=["left","right","top","bottom"],a=(t,e)=>{n(t,"_align",e)}},6611:(t,e,o)=>{o.d(e,{A:()=>s});var i=o(6448),n=o(479);class s{constructor(t,e,o){var s,a,r,l;if(this.experimentalMode=(0,i.a)(),this.setFormAssociatedValue=t=>{var e;const o=null===(e=this.formAssociated)||void 0===e?void 0:e.getAttribute("name");null!==o&&""!==o||(0,n.j)(` The form field (${this.type}) must have a name attribute to be form-associated. Please define the _name attribute.`);const i=this.tryToStringifyValue(t);this.syncValue(t,i,this.formAssociated),this.syncValue(t,i,this.syncToOwnInput)},this.component=t,this.host=this.findHostWithShadowRoot(o),this.type=e,this.experimentalMode&&("KOL-BUTTON"===(l=null===(s=this.host)||void 0===s?void 0:s.tagName)||"KOL-COMBOBOX"===l||"KOL-INPUT-CHECKBOX"===l||"KOL-INPUT-COLOR"===l||"KOL-INPUT-DATE"===l||"KOL-INPUT-EMAIL"===l||"KOL-INPUT-FILE"===l||"KOL-INPUT-NUMBER"===l||"KOL-INPUT-PASSWORD"===l||"KOL-INPUT-RADIO"===l||"KOL-INPUT-RANGE"===l||"KOL-INPUT-TEXT"===l||"KOL-SELECT"===l||"KOL-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===(r=this.host)||void 0===r||r.appendChild(this.formAssociated)}}findHostWithShadowRoot(t){for(;null===(null==t?void 0:t.shadowRoot)&&t!==document.body;)(t=null==t?void 0:t.parentNode).host&&(t=t.host);return t}setAttribute(t,e,o){if(this.experimentalMode)try{if("boolean"!=typeof(o="object"==typeof o&&null!==o?JSON.stringify(o):o)&&"number"!=typeof o&&"string"!=typeof o)throw new Error("Invalid value type: "+typeof o);null==e||e.setAttribute(t,`${o}`)}catch(o){null==e||e.removeAttribute(t)}}tryToStringifyValue(t){try{return"object"==typeof t&&null!==t?JSON.stringify(t).toString():null==t?null:t.toString()}catch(t){return(0,n.l)(`The form field raw value is not able to stringify! ${t}`),""}}syncValue(t,e,o){if(o)switch(this.type){case"file":o.files=t;break;case"select":o.querySelectorAll("option").forEach((t=>{o.removeChild(t)})),Array.isArray(t)&&t.forEach((t=>{const e=this.tryToStringifyValue(t);if("string"==typeof e){const t=document.createElement("option");t.setAttribute("value",e),t.setAttribute("selected",""),o.appendChild(t)}}));break;case"radio":"string"==typeof e&&(o.setAttribute("value",e),o.setAttribute("checked",""),o.value=e);break;default:"string"==typeof e?(o.setAttribute("value",e),o.value=e):(o.removeAttribute("value"),o.value="")}}validateName(t){((t,e,o)=>{(0,n.i)(t,"_name",e,o)})(this.component,t,{hooks:{afterPatch:()=>{this.setAttribute("name",this.formAssociated,this.component.state._name)}}}),void 0===t&&(0,n.j)("A name on input fields or switches is not strictly required, but it might be relevant for the autocomplete function and for the static submission of the input field.")}validateSyncValueBySelector(t){if(this.experimentalMode&&"string"==typeof t){const e=document.querySelector(t);e&&(this.syncToOwnInput=e)}}componentWillLoad(){this.validateName(this.component._name),this.validateSyncValueBySelector(this.component._syncValueBySelector)}}},2320:(t,e,o)=>{o.d(e,{I:()=>p,g:()=>d,v:()=>h});var i=o(6855),n=o(6611),s=o(479),a=o(1618),r=o(5233),l=o(4388),c=o(6255);const h=(t,e)=>{(0,s.w)(t,"_msg",(t=>"object"==typeof t),new Set(["Object"]),e)},d=t=>{var e,o;const i=Boolean("error"===(null===(e=t._msg)||void 0===e?void 0:e._type)&&t._msg._description&&(null===(o=t._msg._description)||void 0===o?void 0:o.length)>0)&&!0===t._touched,n="string"==typeof t._hint&&t._hint.length>0,s=[];return!0===i&&s.push(`${t._id}-error`),!0===n&&s.push(`${t._id}-hint`),{hasError:i,hasHint:n,ariaDescribedBy:s}};class u extends n.A{constructor(t,e,o){super(t,e,o),this.component=t}validateAlert(t){(0,s.b)(this.component,"_alert",t)}validateTouched(t){((t,e)=>{(0,s.b)(t,"_touched",e)})(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateAlert(this.component._alert),this.validateTouched(this.component._touched)}}class p extends u{constructor(t,e,o){super(t,e,o),this.valueChangeListeners=[],this.onFacade={onBlur:this.onBlur.bind(this),onChange:this.onChange.bind(this),onClick:this.onClick.bind(this),onFocus:this.onFocus.bind(this),onInput:this.onInput.bind(this)},this.component=t}validateAccessKey(t){(0,s.i)(this.component,"_accessKey",t)}validateAdjustHeight(t){((t,e)=>{(0,s.b)(t,"_adjustHeight",e)})(this.component,t)}validateDisabled(t){(0,s.b)(this.component,"_disabled",t),!0===t&&(0,s.c)()}validateTooltipAlign(t){(0,c.v)(this.component,t)}validateError(t){const e={_description:t||"",_type:"error"};this.validateMsg(e)}validateHideError(t){((t,e,o)=>{(0,s.b)(t,"_hideError",e,o)})(this.component,t,{hooks:{afterPatch:()=>{this.component.state._hideError&&(0,s.a)("Property hide-error for inputs: Only use when the error message is shown outside of the input component.")}}})}validateHideLabel(t){(0,a.v)(this.component,t,{hooks:{afterPatch:()=>{this.component.state._hideLabel&&(0,s.a)("Property hide-label for inputs: Only use for exceptions like search inputs that are clearly identifiable by their context.")}}})}validateHint(t){(0,s.i)(this.component,"_hint",t)}validateId(t){(0,s.i)(this.component,"_id",t,{hooks:{afterPatch:()=>{this.setAttribute("id",this.formAssociated,this.component.state._id)}},minLength:1}),""!==t&&void 0!==t||(0,s.j)("A unique ID on the input fields is not strictly required, but it might be relevant for E2E tests.")}validateLabel(t){(0,r.a)(this.component,t,{required:!0})}validateMsg(t){h(this.component,t)}validateOn(t){"object"==typeof t&&(0,s.s)(this.component,"_on",t)}validateSmartButton(t){(0,s.o)(t,(()=>{try{t=(0,s.p)(t)}catch(t){}(0,s.s)(this.component,"_smartButton",t)}))}validateTabIndex(t){(0,l.v)(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateAccessKey(this.component._accessKey),this.validateAdjustHeight(this.component._adjustHeight),this.validateError(this.component._error),this.validateMsg(this.component._msg),this.validateDisabled(this.component._disabled),this.validateHideError(this.component._hideError),this.validateHideLabel(this.component._hideLabel),this.validateHint(this.component._hint),this.validateId(this.component._id),this.validateLabel(this.component._label),this.validateSmartButton(this.component._smartButton),this.validateOn(this.component._on),this.validateTabIndex(this.component._tabIndex)}onBlur(t){var e;this.component._alert=!0,this.component._touched=!0,(0,i.s)(t),(0,i.t)("blur",this.host),"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onBlur)&&this.component._on.onBlur(t)}onChange(t,e){var o;e=null!=e?e:t.target.value,(0,i.t)("change",this.host,e),"function"==typeof(null===(o=this.component._on)||void 0===o?void 0:o.onChange)&&this.component._on.onChange(t,e),this.valueChangeListeners.forEach((t=>t(e)))}onInput(t,e=!0,o){var n;o=null!=o?o:t.target.value,(0,i.s)(t),(0,i.t)("input",this.host,o),e&&this.setFormAssociatedValue(o),"function"==typeof(null===(n=this.component._on)||void 0===n?void 0:n.onInput)&&this.component._on.onInput(t,o)}onClick(t){var e;(0,i.s)(t),(0,i.t)("click",this.host),"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onClick)&&this.component._on.onClick(t)}onFocus(t){var e;this.component._alert=!0,(0,i.s)(t),(0,i.t)("focus",this.host),"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onFocus)&&this.component._on.onFocus(t)}addValueChangeListener(t){this.valueChangeListeners.push(t)}}},8447:(t,e,o)=>{o.d(e,{i:()=>r,n:()=>c,r:()=>l});var i=o(397),n=o(4997),s=o(6448);const a=()=>{let t=(0,s.d)().KoliBri;return void 0===t&&(t={},Object.defineProperty((0,s.d)(),"KoliBri",{value:t,writable:!1})),t},r=()=>{(()=>{const t=(0,s.g)().querySelector('meta[name="kolibri"]');if(t&&t.hasAttribute("content")){const e=t.getAttribute("content");"string"==typeof e&&((0,s.s)(e.includes("dev-mode=true")),(0,s.b)(e.includes("experimental-mode=true")),(0,s.c)(e.includes("color-contrast-analysis=true")))}})(),s.L.debug(`\n,--. ,--.         ,--. ,--. ,-----.           ,--.\n|  .'   /  ,---.  |  | \`--' |  |) /_  ,--.--. \`--'\n|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.\n|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |\n\`--' \`--´  \`---´  \`--' \`--' \`------´  \`--'    \`--'\n🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | ${i.E.kolibriVersion}\n\t`,{forceLog:!0})},l=()=>{!0!==a().adviceShown&&(Object.defineProperty(a(),"adviceShown",{get:function(){return!0}}),s.L.debug("\nYou are using the KoliBri component library. If you have any suggestions for improvement or find a problem, please contact us:\n\nTicket: https://github.com/public-ui/kolibri/issues/new/choose (for privacy reasons, please use email)\nEmail: kolibri@itzbund.de\n"))};let c=()=>Math.floor(16777215*Math.random()).toString(16);"test"===n.p&&(c=()=>"nonce")},6855:(t,e,o)=>{function i(t){t.stopImmediatePropagation(),t.stopPropagation()}function n(t,e,o){e&&function(t,e,o){const i=t.dispatchEvent(function(t,e){return new CustomEvent(`kol-${t}`,{bubbles:!0,cancelable:!0,composed:!0,detail:e})}(e,o))}(e,t,o)}function s(t){t.preventDefault(),i(t)}o.d(e,{p:()=>s,s:()=>i,t:()=>n})},1618:(t,e,o)=>{o.d(e,{v:()=>n});var i=o(479);const n=(t,e,o={})=>{(0,i.b)(t,"_hideLabel",e,o)}},5233:(t,e,o)=>{o.d(e,{a:()=>d,b:()=>r,c:()=>l,h:()=>n,v:()=>h});var i=o(479);const n=[0,1,2,3,4,5,6],s=/[a-zA-Z0-9äöüÄÖÜß]/g,a=/^\d+$/;function r(t,e=1){return function(t){var e;return"string"==typeof t&&(null===(e=t.match(s))||void 0===e?void 0:e.length)||0}(t)>=e}function l(t){return a.test(t)}const c=new Set(["string"]),h=(t,e,o={})=>{(0,i.w)(t,"_label",(t=>"string"==typeof t),c,e,function(t){var e;return Object.assign(Object.assign({},t),{hooks:{afterPatch:(e,o,n,s)=>{var a,c;"function"==typeof(null===(a=t.hooks)||void 0===a?void 0:a.afterPatch)&&(null===(c=t.hooks)||void 0===c||c.afterPatch(e,o,n,s)),"string"==typeof e&&!1===r(e,3)&&!1===l(e)&&(0,i.a)(`The heading or label ("${e}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof e&&e.length>80&&(0,i.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(e=t.hooks)||void 0===e?void 0:e.beforePatch}})}(o))},d=h},4997:(t,e,o)=>{o.d(e,{h:()=>n,p:()=>i,s:()=>s});let i="development";try{i="production"}catch(t){i="production"}const n=(t,e,o)=>{if(t&&e&&"string"==typeof o){const i=t.querySelector(`[slot="${o}"]`);i&&e.appendChild(i)}},s=t=>""===t},4388:(t,e,o)=>{o.d(e,{v:()=>s});var i=o(479);const n={hooks:{afterPatch:t=>{-1!==t&&0!==t&&(0,i.a)("Don't Use Tabindex Greater than 0: https://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html")}}},s=(t,e)=>{(0,i.k)(t,"_tabIndex",e,n)}},6255:(t,e,o)=>{o.d(e,{v:()=>n});var i=o(7914);const n=(t,e)=>{(0,i.v)(t,"_tooltipAlign",e)}}}]);