@public-ui/sample-react 3.0.0-rc.8 → 3.0.0

package/public/index.html

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

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

@@ -20,10 +20,10 @@ export const ButtonCases: React.FC<ButtonSampleProps> = (props) => {
 			<KolButton _icons="codicon codicon-heart" _label="Secondary" _variant="secondary" _on={dummyEventHandler} {...other}>
 				{children}
 			</KolButton>
-			<KolButton _icons="codicon codicon-hubot" _label="Normal" _variant="normal" _on={dummyEventHandler} {...other}>
+			<KolButton _icons="codicon codicon-hubot" _label="Tertiary" _variant="tertiary" _on={dummyEventHandler} {...other}>
 				{children}
 			</KolButton>
-			<KolButton _icons="codicon codicon-hubot" _label="Tertiary" _variant="tertiary" _on={dummyEventHandler} {...other}>
+			<KolButton _icons="codicon codicon-hubot" _label="Normal" _variant="normal" _on={dummyEventHandler} {...other}>
 				{children}
 			</KolButton>
 			<KolButton _icons="codicon codicon-trash" _label="Danger" _variant="danger" _on={dummyEventHandler} {...other}>

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

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

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

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

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

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

package/src/react.main.tsx

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

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

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

package/src/scenarios/performance-test.tsx

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

package/src/scenarios/routes.ts

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

package/src/scenarios/same-height-of-all-interactive-elements.tsx

@@ -0,0 +1,62 @@
+import {
+	KolButton,
+	KolCombobox,
+	KolInputColor,
+	KolInputDate,
+	KolInputEmail,
+	KolInputFile,
+	KolInputNumber,
+	KolInputPassword,
+	KolInputRange,
+	KolInputText,
+	KolLinkButton,
+	KolSelect,
+	KolSingleSelect,
+	KolTextarea,
+} from '@public-ui/react';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../components/SampleDescription';
+import { useToasterService } from '../hooks/useToasterService';
+
+export const SameHeightOfAllInteractiveElements: FC = () => {
+	const { dummyClickEventHandler } = useToasterService();
+
+	const dummyEventHandler = {
+		onClick: dummyClickEventHandler,
+	};
+
+	return (
+		<>
+			<SampleDescription>
+				<p>
+					All interactive elements, such as buttons and input fields, should have the same height to ensure a consistent and visually balanced user interface.
+				</p>
+			</SampleDescription>
+			<div className="w-full flex flex-wrap gap-4">
+				<KolButton _icons="codicon codicon-home" _label="Button" _on={dummyEventHandler} />
+				<KolButton _hideLabel _icons="codicon codicon-home" _label="Button" _on={dummyEventHandler} />
+				<KolLinkButton _href="#" _icons="codicon codicon-home" _label="Link-Button" _on={dummyEventHandler} />
+				<KolLinkButton _hideLabel _href="#" _icons="codicon codicon-home" _label="Link-Button" _on={dummyEventHandler} />
+				<KolCombobox _hideLabel _icons="codicon codicon-home" _label="Combobox" _suggestions={[]} />
+				<KolInputColor
+					_hideLabel
+					_icons={{
+						left: 'codicon codicon-home',
+					}}
+					_label="Input-Color"
+				/>
+				<KolInputFile _hideLabel _icons="codicon codicon-home" _label="Input-File" />
+				<KolInputDate _hideLabel _icons="codicon codicon-home" _label="Input-Date" />
+				<KolInputEmail _hideLabel _icons="codicon codicon-home" _label="Input-Email" />
+				<KolInputNumber _hideLabel _icons="codicon codicon-home" _label="Input-Number" />
+				<KolInputPassword _hideLabel _icons="codicon codicon-home" _label="Input-Password" />
+				<KolInputRange _hideLabel _icons="codicon codicon-home" _label="Input-Range" />
+				<KolInputText _hideLabel _icons="codicon codicon-home" _label="Input-Text" />
+				<KolSelect _hideLabel _icons="codicon codicon-home" _label="Combobox" _options={[]} />
+				<KolSingleSelect _hideLabel _icons="codicon codicon-home" _label="Combobox" _options={[]} />
+				<KolTextarea _hideLabel _icons="codicon codicon-home" _label="Combobox" />
+			</div>
+		</>
+	);
+};

package/dist/3022.js

@@ -1,2 +0,0 @@
-/*! For license information please see 3022.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[3022],{1111:(e,t,o)=>{function n(e,t){var o={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(o[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(n=Object.getOwnPropertySymbols(e);i<n.length;i++)t.indexOf(n[i])<0&&Object.prototype.propertyIsEnumerable.call(e,n[i])&&(o[n[i]]=e[n[i]])}return o}o.d(t,{_:()=>n}),"function"==typeof SuppressedError&&SuppressedError},1250:(e,t,o)=>{o.d(t,{v:()=>i});var n=o(5477);const i=(e,t)=>{(0,n.a)(e,"_tooltipAlign",t)}},1400:(e,t,o)=>{o.d(t,{K:()=>d});var n=o(1111),i=o(7386),s=o(8045);const a=1;function l(e){return function(e){return e>=a&&e<=6}(e)?`h${e}`:"strong"}const r=(e,t)=>{var{class:o,level:r=a,variant:c}=e,d=(0,n._)(e,["class","level","variant"]);const h=l(r),u=c||h;return(0,i.h)(h,Object.assign({class:(0,s.c)("kol-headline",`kol-headline--${u}`,o)},d),t)},c=(e,t)=>{var{class:o,level:r=a}=e,c=(0,n._)(e,["class","level"]);const d=function(e){return 1===e?"span":l(e)}(r+1);return(0,i.h)(d,Object.assign({class:(0,s.c)("kol-headline kol-headline--group kol-headline--secondary",o)},c),t)},d=(e,t)=>{var{secondaryHeadline:o,level:l=a,class:d,HeadingGroupProps:h={},SecondaryHeadlineProps:u={}}=e,p=(0,n._)(e,["secondaryHeadline","level","class","HeadingGroupProps","SecondaryHeadlineProps"]);const b=Object.assign({level:l},p);if(!o)return(0,i.h)(r,Object.assign({class:(0,s.c)(d,"kol-headline--single")},b),t);const{class:m}=h,f=(0,n._)(h,["class"]),v=Object.assign({class:(0,s.c)("kol-heading-group",m)},f);return(0,i.h)("hgroup",Object.assign({},v),(0,i.h)(r,Object.assign({class:(0,s.c)(d,"kol-headline--group","kol-headline--primary")},b),t),(0,i.h)(c,Object.assign({level:l},u),o))}},3098:(e,t,o)=>{o.d(t,{A:()=>s});var n=o(3051),i=o(3892);class s{constructor(e,t,o){var s,a,l,r;if(this.experimentalMode=(0,n.a)(),this.setFormAssociatedValue=e=>{var t;const o=null===(t=this.formAssociated)||void 0===t?void 0:t.getAttribute("name");null!==o&&""!==o||(0,i.j)(` The form field (${this.type}) must have a name attribute to be form-associated. Please define the _name attribute.`);const n=this.tryToStringifyValue(e);this.syncValue(e,n,this.formAssociated),this.syncValue(e,n,this.syncToOwnInput)},this.component=e,this.host=this.findHostWithShadowRoot(o),this.type=t,this.experimentalMode&&("KOL-BUTTON"===(r=null===(s=this.host)||void 0===s?void 0:s.tagName)||"KOL-COMBOBOX"===r||"KOL-INPUT-CHECKBOX"===r||"KOL-INPUT-COLOR"===r||"KOL-INPUT-DATE"===r||"KOL-INPUT-EMAIL"===r||"KOL-INPUT-FILE"===r||"KOL-INPUT-NUMBER"===r||"KOL-INPUT-PASSWORD"===r||"KOL-INPUT-RADIO"===r||"KOL-INPUT-RANGE"===r||"KOL-INPUT-TEXT"===r||"KOL-SELECT"===r||"KOL-SINGLE-SELECT"===r||"KOL-TEXTAREA"===r)&&e._name){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("data-form-associated",""),this.formAssociated.setAttribute("hidden",""),null===(l=this.host)||void 0===l||l.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,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==t||t.setAttribute(e,`${o}`)}catch(o){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.l)(`The form field raw value is not able to stringify! ${e}`),""}}syncValue(e,t,o){if(o)switch(this.type){case"file":o.files=e;break;case"select":o.querySelectorAll("option").forEach((e=>{o.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",""),o.appendChild(e)}}));break;case"radio":"string"==typeof t&&(o.setAttribute("value",t),o.setAttribute("checked",""),o.value=t);break;default:"string"==typeof t?(o.setAttribute("value",t),o.value=t):(o.removeAttribute("value"),o.value="")}}validateName(e){((e,t,o)=>{(0,i.i)(e,"_name",t,o)})(this.component,e,{hooks:{afterPatch:()=>{this.setAttribute("name",this.formAssociated,this.component.state._name)}}}),void 0===e&&(0,i.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(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)}}},3638:(e,t,o)=>{o.d(t,{a:()=>h,b:()=>l,c:()=>r,h:()=>i,v:()=>d});var n=o(3892);const i=[0,1,2,3,4,5,6],s=/[a-zA-Z0-9äöüÄÖÜß]/g,a=/^\d+$/;function l(e,t=1){return function(e){var t;return"string"==typeof e&&(null===(t=e.match(s))||void 0===t?void 0:t.length)||0}(e)>=t}function r(e){return a.test(e)}const c=new Set(["string"]),d=(e,t,o={})=>{(0,n.w)(e,"_label",(e=>"string"==typeof e),c,t,function(e){var t;return Object.assign(Object.assign({},e),{hooks:{afterPatch:(t,o,i,s)=>{var a,c;"function"==typeof(null===(a=e.hooks)||void 0===a?void 0:a.afterPatch)&&(null===(c=e.hooks)||void 0===c||c.afterPatch(t,o,i,s)),"string"==typeof t&&!1===l(t,3)&&!1===r(t)&&(0,n.a)(`The heading or label ("${t}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof t&&t.length>80&&(0,n.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(t=e.hooks)||void 0===t?void 0:t.beforePatch}})}(o))},h=d},3648:(e,t,o)=>{o.d(t,{b:()=>s,p:()=>n,s:()=>i});let n="development";try{n="production"}catch(e){n="production"}const i=e=>""===e,s=(e,t)=>e||t||""},4208:(e,t,o)=>{o.d(t,{i:()=>l,n:()=>c,r:()=>r});var n=o(7386),i=o(3648),s=o(3051);const a=()=>{let e=(0,s.d)().KoliBri;return void 0===e&&(e={},Object.defineProperty((0,s.d)(),"KoliBri",{value:e,writable:!1})),e},l=()=>{(()=>{const e=(0,s.g)().querySelector('meta[name="kolibri"]');if(e&&e.hasAttribute("content")){const t=e.getAttribute("content");"string"==typeof t&&((0,s.s)(t.includes("dev-mode=true")),(0,s.b)(t.includes("experimental-mode=true")),(0,s.c)(t.includes("color-contrast-analysis=true")))}})(),s.L.debug(`\n,--. ,--.         ,--. ,--. ,-----.           ,--.\n|  .'   /  ,---.  |  | \`--' |  |) /_  ,--.--. \`--'\n|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.\n|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |\n\`--' \`--´  \`---´  \`--' \`--' \`------´  \`--'    \`--'\n🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | ${n.E.kolibriVersion}\n\t`,{forceLog:!0})},r=()=>{!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"===i.p&&(c=()=>"nonce")},5452:(e,t,o)=>{o.d(t,{t:()=>s});var n=o(4269),i=o(3648);let s=(e,t)=>{var o;return(null!==(o=(0,n.g)())&&void 0!==o?o:(0,n.i)("de")).translate(e,t)};"test"===i.p&&(s=e=>e)},5477:(e,t,o)=>{o.d(t,{a:()=>i,v:()=>a});var n=o(3892);const i=(e,t,o)=>{(0,n.w)(e,t,(e=>"string"==typeof e&&s.includes(e)),new Set(s),o,{defaultValue:"top"})},s=["left","right","top","bottom"],a=(e,t)=>{i(e,"_align",t)}},5847:(e,t,o)=>{o.d(t,{a:()=>r,b:()=>l,c:()=>a,v:()=>i});var n=o(3892);const i=(e,t)=>{(0,n.i)(e,"_accessKey",t)},s={hooks:{afterPatch:e=>{-1!==e&&0!==e&&(0,n.a)("Don't Use Tabindex Greater than 0: https://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html")}}},a=(e,t)=>{(0,n.k)(e,"_tabIndex",t,s)},l=(e,t)=>{(0,n.i)(e,"_shortKey",t)},r=(e,t)=>{if(e&&t)throw new Error("AccessKey and ShortKey are used. Only one is allowed.")}},6171:(e,t,o)=>{o.d(t,{I:()=>E,K:()=>x,a:()=>y,b:()=>K,c:()=>_,d:()=>L,e:()=>A,f:()=>P,g:()=>I});var n=o(3694),i=o(3098),s=o(3892),a=o(5847),l=o(1250),r=o(7809),c=o(3638),d=o(1111),h=o(7386),u=o(8045),p=o(9389),b=o(5452),m=o(7763),f=o(7622),v=o(3648),g=o(7125);function y(e){var t;if(e)return t=e,Object.entries(t).reduce(((e,[t,o])=>{const n=t.startsWith("_")?t.slice(1):t;return Object.assign(Object.assign({},e),{[n]:o})}),{})}function _(e,t){return!!e&&(!0===t||"error"!==(null==e?void 0:e.type))}const O=e=>{var{alert:t,msg:o,hideMsg:n,id:i,class:s}=e,a=(0,d._)(e,["alert","msg","hideMsg","id","class"]);return(0,h.h)(p.K,Object.assign({id:`${i}-msg`,alert:t,type:"error",class:(0,u.c)("kol-form-field__msg",{"visually-hidden":!0===n},s)},o,a,{"aria-hidden":"true"}),(null==o?void 0:o.description)||void 0)},k=({hasExpertSlot:e,accessKey:t,shortKey:o,label:n,showBadge:i=!0})=>{if(e)return(0,h.h)("slot",{name:"expert"});if(!n)return null;const s=(0,f.i)(t)||(0,f.i)(o);if(!i||!s)return(0,h.h)("span",null,n);const a=(0,v.b)(t,o);return(0,h.h)(h.F,null,(0,h.h)(f.I,{badgeText:a,label:n})," ",(0,h.h)("span",{class:"badge-text-hint","aria-hidden":"true"},a))},L=e=>{var{component:t="label",id:o,baseClassName:n="kol-form-field",class:i,accessKey:s,shortKey:a,label:l,hideLabel:r,hasExpertSlot:c,showBadge:p}=e,b=(0,d._)(e,["component","id","baseClassName","class","accessKey","shortKey","label","hideLabel","hasExpertSlot","showBadge"]);const m=!c&&r;return(0,h.h)(t,Object.assign({},b,{class:(0,u.c)(`${n}__label`,i),id:m?void 0:`${o}-label`,hidden:m,htmlFor:o}),(0,h.h)("span",{class:(0,u.c)(`${n}__label-text`)},(0,h.h)(k,{hasExpertSlot:c,accessKey:s,shortKey:a,label:l,showBadge:p})))},A=e=>{var{id:t,class:o,hint:n,baseClassName:i="kol-form-field"}=e,s=(0,d._)(e,["id","class","hint","baseClassName"]);return n?(0,h.h)("span",Object.assign({class:(0,u.c)(`${i}__hint`,o),id:`${t}-hint`},s),n):null},j=e=>{var{currentLength:t,maxLength:o,class:n}=e,i=(0,d._)(e,["currentLength","maxLength","class"]);return(0,h.h)("span",Object.assign({class:(0,u.c)("kol-form-field__counter",n)},i,{"aria-atomic":"true","aria-live":"polite","data-testid":"input-counter"}),t,o&&(0,h.h)(h.F,null,(0,h.h)("span",{"aria-label":(0,b.t)("kol-of"),role:"img"},"/"),o)," ",(0,h.h)("span",null,(0,b.t)("kol-characters")))},K=({id:e,align:t,badgeText:o,hideLabel:n,label:i,class:s})=>(0,h.h)(m.g,{"aria-hidden":"true",class:(0,u.c)("kol-form-field__tooltip",s),_badgeText:o,_align:t,_id:n?`${e}-label`:void 0,_label:i});function S(e){return(null==e?void 0:e.type)&&{default:"msg-type-default",info:"msg-type-info",success:"msg-type-success",warning:"msg-type-warning",error:"msg-type-error"}[null==e?void 0:e.type]||""}const T=(e,t)=>{var{class:o}=e,n=(0,d._)(e,["class"]);return(0,h.h)("div",Object.assign({class:(0,u.c)("kol-form-field__input",o)},n),t)},C=(e,t)=>{const{component:o="div",renderNoLabel:n,renderNoTooltip:i,renderNoHint:s,anotherChildren:a,id:l,required:r,alert:c,disabled:p,class:b,msg:m,hideMsg:f,hideLabel:g,label:y,hint:k,accessKey:C,shortKey:P,tooltipAlign:w,counter:E,readOnly:x,touched:I,formFieldLabelProps:B,formFieldHintProps:N,formFieldTooltipProps:F,formFieldMsgProps:M,formFieldCounterProps:H,formFieldInputProps:$}=e,U=(0,d._)(e,["component","renderNoLabel","renderNoTooltip","renderNoHint","anotherChildren","id","required","alert","disabled","class","msg","hideMsg","hideLabel","label","hint","accessKey","shortKey","tooltipAlign","counter","readOnly","touched","formFieldLabelProps","formFieldHintProps","formFieldTooltipProps","formFieldMsgProps","formFieldCounterProps","formFieldInputProps"]),q=!n,V=!s,D=!i,R=(0,v.s)(y),W=_(m,I),G=(0,v.b)(C,P),X=D&&!R&&g;let z={"kol-form-field--disabled":Boolean(p),"kol-form-field--required":Boolean(r),"kol-form-field--touched":Boolean(I),"kol-form-field--hide-label":Boolean(g),"kol-form-field--read-only":Boolean(x),"kol-form-field--hidden-msg":Boolean(f)};return W&&(z=Object.assign(Object.assign({},z),{[`kol-form-field--${(null==m?void 0:m.type)||"error"}`]:!0,[`kol-form-field--${S(m)}`]:!0})),(0,h.h)(o,Object.assign({class:(0,u.c)("kol-form-field",z,b)},U),q&&(0,h.h)(L,Object.assign({},B||{},{id:l,hasExpertSlot:R,hideLabel:g,label:y,accessKey:C,shortKey:P})),(0,h.h)(T,Object.assign({},$),t,X&&(0,h.h)(K,Object.assign({},F||{},{id:l,label:y,hideLabel:g,align:w,badgeText:G}))),E?(0,h.h)(j,Object.assign({},H||{},E)):null,W&&(0,h.h)(O,Object.assign({},M||{},{id:l,alert:c,msg:m,hideMsg:f})),V&&(0,h.h)(A,Object.assign({},N||{},{id:l,hint:k})),a)};function P({ariaDescribedBy:e,hideLabel:t,label:o}){return{title:"",autoCapitalize:"off",autoCorrect:"off","aria-describedby":(null==e?void 0:e.length)?e.join(" "):void 0,"aria-label":t&&o?o:void 0}}class w extends i.A{constructor(e,t,o){super(e,t,o),this.component=e}validateTouched(e){((e,t)=>{(0,s.b)(e,"_touched",t)})(this.component,e)}componentWillLoad(){super.componentWillLoad(),this.validateTouched(this.component._touched)}}class E extends w{constructor(e,t,o){super(e,t,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=e}validateAccessKey(e){(0,a.v)(this.component,e),(0,a.a)(e,this.component._shortKey)}validateAdjustHeight(e){((e,t)=>{(0,s.b)(e,"_adjustHeight",t)})(this.component,e)}validateDisabled(e){(0,s.b)(this.component,"_disabled",e),!0===e&&(0,s.c)()}validateTooltipAlign(e){(0,l.v)(this.component,e)}validateHideMsg(e){((e,t,o)=>{(0,s.b)(e,"_hideMsg",t,o)})(this.component,e,{hooks:{afterPatch:()=>{this.component.state._hideMsg&&(0,s.a)("Property _hideMsg for inputs: Only use when the error message is shown outside of the input component.")}}})}validateHideLabel(e){(0,r.v)(this.component,e,{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(e){(0,s.i)(this.component,"_hint",e)}validateId(e){(0,s.i)(this.component,"_id",e,{minLength:1}),""!==e&&void 0!==e||(0,s.j)("A unique ID on the input fields is not strictly required, but it might be relevant for E2E tests.")}validateLabel(e){(0,c.a)(this.component,e,{required:!0})}validateMsg(e){((e,t)=>{(0,s.o)(t,(()=>{try{t=(0,s.p)(t)}catch(e){}(0,s.w)(e,"_msg",(e=>(0,g.b)(e)&&(0,g.i)(null==e?void 0:e._description,1)||void 0===(null==e?void 0:e._type)),new Set(["MsgPropType"]),t)}))})(this.component,e)}validateOn(e){"object"==typeof e&&(0,s.s)(this.component,"_on",e)}validateShortKey(e){(0,a.b)(this.component,e),(0,a.a)(this.component._accessKey,e)}validateSmartButton(e){(0,s.o)(e,(()=>{try{e=(0,s.p)(e)}catch(e){}(0,s.s)(this.component,"_smartButton",e)}))}validateTabIndex(e){(0,a.c)(this.component,e)}componentWillLoad(){super.componentWillLoad(),this.validateAccessKey(this.component._accessKey),this.validateAdjustHeight(this.component._adjustHeight),this.validateMsg(this.component._msg),this.validateDisabled(this.component._disabled),this.validateHideMsg(this.component._hideMsg),this.validateHideLabel(this.component._hideLabel),this.validateHint(this.component._hint),this.validateId(this.component._id),this.validateLabel(this.component._label),this.validateShortKey(this.component._shortKey),this.validateSmartButton(this.component._smartButton),this.validateOn(this.component._on),this.validateTabIndex(this.component._tabIndex),(0,a.a)(this.component._accessKey,this.component._shortKey)}emitEvent(e,t){this.host&&(0,n.d)(this.host,e,t)}onBlur(e){var t;this.component._touched=!0,this.emitEvent(n.K.blur),"function"==typeof(null===(t=this.component._on)||void 0===t?void 0:t.onBlur)&&this.component._on.onBlur(e)}onChange(e,t){var o;void 0===t&&(t=e.target.value),this.emitEvent(n.K.change,t),"function"==typeof(null===(o=this.component._on)||void 0===o?void 0:o.onChange)&&this.component._on.onChange(e,t),this.valueChangeListeners.forEach((e=>e(t)))}onInput(e,t=!0,o){var i;void 0===o&&(o=e.target.value),this.emitEvent(n.K.input,o),t&&this.setFormAssociatedValue(o),"function"==typeof(null===(i=this.component._on)||void 0===i?void 0:i.onInput)&&this.component._on.onInput(e,o)}onClick(e){var t;this.emitEvent(n.K.click),"function"==typeof(null===(t=this.component._on)||void 0===t?void 0:t.onClick)&&this.component._on.onClick(e)}onFocus(e){var t;this.emitEvent(n.K.focus),"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)}}const x=(e,t)=>{var{state:o}=e,n=(0,d._)(e,["state"]);return(0,h.h)(C,Object.assign({},function(e){const t={id:e._id,disabled:e._disabled,msg:y(e._msg),hint:e._hint,label:e._label,hideLabel:e._hideLabel,hideMsg:e._hideMsg,touched:e._touched,accessKey:e._accessKey,shortKey:e._shortKey};return"_required"in e&&(t.required=e._required),"_readOnly"in e&&(t.readOnly=e._readOnly),"_hasCounter"in e&&"_currentLength"in e&&(t.counter=e._hasCounter?{currentLength:e._currentLength}:void 0,t.counter&&"_maxLength"in e&&(t.counter.maxLength=e._maxLength)),t}(o),n),t)},I=e=>{var t,o,n;const i=Boolean((null===(t=null==e?void 0:e._msg)||void 0===t?void 0:t._description)&&(null===(o=e._msg._description)||void 0===o?void 0:o.length)>0),s="error"===(null===(n=e._msg)||void 0===n?void 0:n._type)&&i&&!0===e._touched,a="string"==typeof e._hint&&e._hint.length>0,l=[];return i&&l.push(`${e._id}-msg`),a&&l.push(`${e._id}-hint`),{hasError:s,hasHint:a,ariaDescribedBy:l}}},7125:(e,t,o)=>{o.d(t,{S:()=>a,a:()=>s,b:()=>n,i:()=>i});const n=e=>"object"==typeof e&&null!==e,i=(e,t=0)=>"string"==typeof e&&e.length>=t,s=e=>{if("object"!=typeof e||null===e)return i(e,1);for(const t in e)if(!1===i(t,1))return!1;return!0},a=new Event("StateChange")},7622:(e,t,o)=>{o.d(t,{I:()=>g,i:()=>v});var n=o(7386);const i="object"==typeof o.g&&o.g&&o.g.Object===Object&&o.g;var s="object"==typeof self&&self&&self.Object===Object&&self;const a=(i||s||Function("return this")()).Symbol;var l=Object.prototype,r=l.hasOwnProperty,c=l.toString,d=a?a.toStringTag:void 0,h=Object.prototype.toString,u="[object Null]",p="[object Undefined]",b=a?a.toStringTag:void 0;const m=Array.isArray;var f="[object String]";function v(e){return"string"==typeof e||!m(e)&&function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?p:u:b&&b in Object(e)?function(e){var t=r.call(e,d),o=e[d];try{e[d]=void 0;var n=!0}catch(e){}var i=c.call(e);return n&&(t?e[d]=o:delete e[d]),i}(e):function(e){return h.call(e)}(e)}(e)==f}const g=({badgeText:e,label:t})=>{const o=e;let[i,...s]=t.split(o);return 0===s.length&&(e=o.toUpperCase(),[i,...s]=t.split(o)),0===s.length&&(e=o.toLowerCase(),[i,...s]=t.split(o)),(0,n.h)(n.F,null,i,s.length?(0,n.h)(n.F,null,(0,n.h)("u",null,e),s.join(o)):null)}},7809:(e,t,o)=>{o.d(t,{v:()=>i});var n=o(3892);const i=(e,t,o={})=>{(0,n.b)(e,"_hideLabel",t,o)}},8045:(e,t,o)=>{function n(e){var t,o,i="";if("string"==typeof e||"number"==typeof e)i+=e;else if("object"==typeof e)if(Array.isArray(e)){var s=e.length;for(t=0;t<s;t++)e[t]&&(o=n(e[t]))&&(i&&(i+=" "),i+=o)}else for(o in e)e[o]&&(i&&(i+=" "),i+=o);return i}function i(){for(var e,t,o=0,i="",s=arguments.length;o<s;o++)(e=arguments[o])&&(t=n(e))&&(i&&(i+=" "),i+=t);return i}o.d(t,{c:()=>i})},9389:(e,t,o)=>{o.d(t,{K:()=>h});var n=o(1111),i=o(7386),s=o(8045),a=o(5452),l=o(7763),r=o(1400);const c=({ariaLabel:e,icon:t})=>(0,i.h)(i.F,null,(0,i.h)("span",{class:"visually-hidden"},e),(0,i.h)(l.d,{class:"kol-alert__heading-icon",_label:"",_icons:t})),d=({type:e,label:t})=>{switch(e){case"error":return(0,i.h)(c,{ariaLabel:(0,a.t)("kol-error"),icon:"codicon codicon-error",label:t});case"info":return(0,i.h)(c,{ariaLabel:(0,a.t)("kol-info"),icon:"codicon codicon-info",label:t});case"warning":return(0,i.h)(c,{ariaLabel:(0,a.t)("kol-warning"),icon:"codicon codicon-warning",label:t});case"success":return(0,i.h)(c,{ariaLabel:(0,a.t)("kol-success"),icon:"codicon codicon-pass",label:t});default:return(0,i.h)(c,{ariaLabel:(0,a.t)("kol-message"),icon:"codicon codicon-comment",label:t})}},h=(e,t)=>{var o,c;const{class:h={},type:u="default",variant:p="msg",label:b,hasCloser:m,alert:f,onAlertTimeout:v,onCloserClick:g,level:y}=e,_=(0,n._)(e,["class","type","variant","label","hasCloser","alert","onAlertTimeout","onCloserClick","level"]);f&&((null===(o=navigator.userActivation)||void 0===o?void 0:o.hasBeenActive)&&(null===(c=null===navigator||void 0===navigator?void 0:navigator.vibrate)||void 0===c||c.call(navigator,[100,75,100,75,100])),setTimeout((()=>{null==v||v()}),1e4));const O=Object.assign({class:(0,s.c)("kol-alert",`kol-alert--${u}`,`kol-alert--${p}`,{"kol-alert--hasCloser":!!m},h),role:f?"alert":void 0},_);return(0,i.h)("div",Object.assign({},O),(0,i.h)("div",{class:"kol-alert__container"},(0,i.h)(d,{label:b,type:u}),(0,i.h)("div",{class:"kol-alert__container-content"},b?(0,i.h)(r.K,{class:"kol-alert__heading",level:y},b):null,"msg"===p&&(0,i.h)("div",{class:"kol-alert__content"},t)),m&&(0,i.h)(l.a,{class:"kol-alert__close-button close","data-testid":"alert-close-button",_ariaDescription:(null==b?void 0:b.trim())||"",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:(0,a.t)("kol-close-alert"),_on:{onClick:g},_tooltipAlign:"left"})),"card"===p&&(0,i.h)("div",{class:"kol-alert__content"},t))}}}]);

package/dist/4776.js

@@ -1,2 +0,0 @@
-/*! For license information please see 4776.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[4776],{114:(e,t,n)=>{n.d(t,{I:()=>C,K:()=>y,a:()=>f});var o=n(7386),i=n(7622),a=n(1476),s=n(1111),l=n(7763),c=n(4451),r=n(8045),d=n(6171),u=n(9688),h=n(3892),p=n(7125);const m=(e,t)=>{var{position:n="start",class:i}=e,a=(0,s._)(e,["position","class"]);const l="kol-input-container__adornment",c=`${l}--${n}`;return(0,o.h)("div",Object.assign({class:(0,r.c)(l,c,i)},a),t)};function _(e){return!!e&&(Array.isArray(e)?e.length>0:Boolean(e))}const b=(e,t)=>{var{class:n}=e,i=(0,s._)(e,["class"]);return(0,o.h)("div",Object.assign({class:(0,r.c)("kol-input-container__container",n)},i),t)},g=(e,t)=>{const{class:n,startAdornment:i,endAdornment:a,disabled:l,msg:c,touched:u,containerProps:h,startAdornmentProps:p,endAdornmentProps:g}=e,v=(0,s._)(e,["class","startAdornment","endAdornment","disabled","msg","touched","containerProps","startAdornmentProps","endAdornmentProps"]),f=(0,d.c)(c,u),y={"kol-input-container--disabled":l,[`kol-input-container--${(null==c?void 0:c.type)||"error"}`]:f},k=Object.assign({class:(0,r.c)("kol-input-container",y,n)},v);return _(i)||_(a)?(0,o.h)("div",Object.assign({},k),(0,o.h)(m,Object.assign({},p,{position:"start"}),i),(0,o.h)(b,Object.assign({},h),t),(0,o.h)(m,Object.assign({},g,{position:"end"}),a)):(0,o.h)("div",Object.assign({},k),(0,o.h)(b,Object.assign({},h),t))},v=e=>{const{label:t,icons:n,hideLabel:i,disabled:a,onClick:c}=e,r=(0,s._)(e,["label","icons","hideLabel","disabled","onClick"]);return(0,o.h)(l.a,Object.assign({_label:t,_disabled:a,_icons:n,_hideLabel:i,_on:{onClick:c}},r))},f=e=>{const{componentName:t="button",label:n,icon:i,onClick:a}=e,l=(0,s._)(e,["componentName","label","icon","onClick"]),r="button"===t?v:c.K;return(0,o.h)(r,Object.assign({label:n||"",hideLabel:!0,icons:`codicon codicon-${i}`,onClick:a},l))},y=({state:e,endAdornment:t},n)=>{const{icons:s,smartButton:l,disabled:c,msg:r,touched:u}=function(e){let t,n;return"_icons"in e&&(t=e._icons),"_smartButton"in e&&(n=e._smartButton),{icons:t,smartButton:n,disabled:e._disabled,msg:(0,d.a)(e._msg),touched:e._touched}}(e);let h=null==s?void 0:s.left;(0,i.i)(h)&&(h={icon:h});let p=null==s?void 0:s.right;(0,i.i)(p)&&(p={icon:p});const m=[],_=[];return t&&(Array.isArray(t)?_.push(...t):_.push(t)),h&&m.push((0,o.h)(f,Object.assign({componentName:"icon",class:"kol-input-container__icon"},(0,a.i)(h)?h:{}))),(0,a.i)(l)&&_.push((0,o.h)(f,Object.assign({componentName:"button",class:"kol-input-container__smart-button"},l,{hideLabel:!0,disabled:c}))),p&&_.push((0,o.h)(f,Object.assign({componentName:"icon",class:"kol-input-container__icon"},(0,a.i)(p)?p:{}))),(0,o.h)(g,{disabled:c,msg:r,touched:u,startAdornment:m,endAdornment:_},n)},k=(e,t)=>{const n=e;"object"==typeof n&&null!==n&&((0,p.i)(n.right,1)&&(n.right={icon:n.right}),(0,p.i)(n.left,1)&&(n.left={icon:n.left}),t.set("_icons",n))};class C extends d.I{constructor(e,t,n){super(e,t,n),this.component=e}validateIcons(e){(0,h.o)(e,(()=>{try{e=(0,h.p)(e)}catch(e){}(0,h.w)(this.component,"_icons",(e=>"object"==typeof e&&null!==e&&((0,p.i)(e.left,1)||(0,u.i)(e.left)||(0,p.i)(e.right,1)||(0,u.i)(e.right))),new Set(["KoliBriHorizontalIcon"]),e,{hooks:{beforePatch:k},required:!0})}))}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons)}}},131:(e,t,n)=>{n.d(t,{K:()=>l});var o=n(1111),i=n(7386),a=n(8045),s=n(6171);const l=e=>{const{class:t,msg:n,required:l,disabled:c,touched:r,readonly:d,ariaDescribedBy:u,hideLabel:h,label:p,suggestions:m,value:_}=e,b=(0,o._)(e,["class","msg","required","disabled","touched","readonly","ariaDescribedBy","hideLabel","label","suggestions","value"]),g=(0,s.c)(n,r),v={"kol-input--disabled":Boolean(c),"kol-input--required":Boolean(l),"kol-input--touched":Boolean(r),"kol-input--readonly":Boolean(d),[`kol-input--${(null==n?void 0:n.type)||"error"}`]:g},f=Object.assign(Object.assign({class:(0,a.c)("kol-input",v,t),required:l,disabled:c,readonly:d,type:"text",list:m?`${b.id}-list`:void 0},(0,s.f)({ariaDescribedBy:u,hideLabel:h,label:p})),b);return(0,i.h)(i.F,null,(0,i.h)("input",Object.assign({},f,{value:_})),m)}},1476:(e,t,n)=>{function o(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}n.d(t,{i:()=>o})},4451:(e,t,n)=>{n.d(t,{K:()=>a});var o=n(7386),i=n(7763);const a=e=>{const{class:t,style:n,icons:a,label:s,onClick:l}=e;return(0,o.h)(i.d,{class:t,style:n,onClick:l,_icons:a,_label:s})}},4640:(e,t,n)=>{n.d(t,{K:()=>c,a:()=>l});var o=n(1111),i=n(7386),a=n(6171),s=n(131);const l=e=>{var{id:t,suggestions:n}=e,a=(0,o._)(e,["id","suggestions"]);return n?(0,i.h)("datalist",Object.assign({id:`${t}-list`},a),n.map((e=>(0,i.h)("option",{value:e})))):null},c=e=>{var{state:t,customSuggestions:n}=e,c=(0,o._)(e,["state","customSuggestions"]);return(0,i.h)(s.K,Object.assign({},function(e,t){const{ariaDescribedBy:n}=(0,a.g)(e),o={id:e._id,hideLabel:e._hideLabel,label:e._label,accessKey:e._accessKey,disabled:e._disabled,name:e._name,ariaDescribedBy:n};return"_type"in e&&(o.type=e._type),"_value"in e&&(o.value=e._value),"_required"in e&&(o.required=e._required),"_maxLength"in e&&(o.maxlength=e._maxLength),"_placeholder"in e&&(o.placeholder=e._placeholder),"_autoComplete"in e&&(o.autoComplete=e._autoComplete),"_spellCheck"in e&&(o.spellcheck=e._spellCheck),"_pattern"in e&&(o.pattern=e._pattern),"_readOnly"in e&&(o.readonly=e._readOnly),"_min"in e&&(o.min=e._min),"_max"in e&&(o.max=e._max),"_step"in e&&(o.step=e._step),"_multiple"in e&&(o.multiple=e._multiple),"_checked"in e&&(o.checked=e._checked),"_indeterminate"in e&&(o.indeterminate=e._indeterminate),"_touched"in e&&(o.touched=e._touched),"_msg"in e&&(o.msg=(0,a.a)(e._msg)),"_suggestions"in e&&!t&&Array.isArray(e._suggestions)&&e._suggestions.length>0&&(o.suggestions=(0,i.h)(l,{id:e._id,suggestions:e._suggestions})),o}(t,n),c))}},9e3:(e,t,n)=>{n.d(t,{v:()=>i});var o=n(3892);const i=(e,t,n)=>{(0,o.b)(e,"_hasCounter",t,n)}},9253:(e,t,n)=>{n.d(t,{I:()=>l});var o=n(3892),i=n(114),a=n(9e3);const s=["default","visibility-toggle"];class l extends i.I{constructor(e,t,n){super(e,t,n),this.afterSyncCharCounter=()=>{"string"==typeof this.component._value&&this.component._value.length>0&&(this.component.state._currentLength=this.component._value.length)},this.component=e}validateAutoComplete(e){(0,o.w)(this.component,"_autoComplete",(e=>"string"==typeof e&&("on"===e||"off"===e)),new Set(["on | off"]),e)}validateHasCounter(e){(0,a.v)(this.component,e,{hooks:{afterPatch:this.afterSyncCharCounter}})}validateVariant(e){((e,t)=>{(0,o.w)(e,"_variant",(e=>"string"==typeof e&&s.includes(e)),new Set(s),t)})(this.component,e)}validateMaxLength(e){(0,o.k)(this.component,"_maxLength",e,{hooks:{afterPatch:this.afterSyncCharCounter},min:0})}validatePattern(e){(0,o.i)(this.component,"_pattern",e)}validatePlaceholder(e){(0,o.i)(this.component,"_placeholder",e)}validateReadOnly(e){(0,o.b)(this.component,"_readOnly",e)}validateRequired(e){(0,o.b)(this.component,"_required",e)}validateValue(e){(0,o.i)(this.component,"_value",e,{hooks:{afterPatch:this.afterSyncCharCounter}}),this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateHasCounter(this.component._hasCounter),this.validateMaxLength(this.component._maxLength),this.validatePattern(this.component._pattern),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateRequired(this.component._required),this.validateValue(this.component._value),this.validateVariant(this.component._variant)}}},9293:(e,t,n)=>{n.d(t,{a:()=>l,p:()=>c});var o=n(7763),i=n(3892),a=n(3051);const s=e=>{for((0,a.a)()&&((0,i.j)("↓ Search form element start."),a.L.debug(e));e instanceof HTMLElement&&"FORM"!==e.tagName&&e.tagName!==o.h.toUpperCase();){try{e=e.parentElement instanceof HTMLElement?e.parentElement:e.parentNode instanceof ShadowRoot?e.parentNode.host:null}catch(e){}(0,a.a)()&&(a.L.debug(e),(0,i.j)("↑ Search form element finished."))}return e},l=(e={})=>{var t,n;const a=s(e.form);if(a instanceof HTMLElement){const e=new Event("reset",{bubbles:!0,cancelable:!0});if("FORM"===a.tagName)(0,i.n)(e,a),a.dispatchEvent(e);else if(a.tagName===o.h.toUpperCase()){(0,i.n)(e,i.K.querySelector("form",a));const o=a;"function"==typeof(null===(t=o._on)||void 0===t?void 0:t.onReset)&&(null===(n=o._on)||void 0===n||n.onReset(e))}}},c=(e={})=>{const t=s(e.form);if(t instanceof HTMLElement){const e=new SubmitEvent("submit",{bubbles:!0,cancelable:!0,submitter:t});if("FORM"===t.tagName)(0,a.a)()&&!1===t.noValidate&&(0,i.j)("If you have not focusable or hidden form fields in your form, you should enable noValidate for your form.",{force:!0}),setTimeout((()=>{"function"==typeof t.requestSubmit?t.requestSubmit():((0,i.n)(e,t),t.dispatchEvent(e))}));else if(t.tagName===o.h.toUpperCase()){(0,i.n)(e,i.K.querySelector("form",t));const n=t;setTimeout((()=>{var t,o;"function"==typeof(null===(t=n._on)||void 0===t?void 0:t.onSubmit)&&(null===(o=n._on)||void 0===o||o.onSubmit(e))}))}}}},9688:(e,t,n)=>{n.d(t,{i:()=>s,v:()=>l});var o=n(3892),i=n(7125);const a=(e,t,n)=>{(0,i.b)(n)?e[t]=n:(0,i.i)(n,1)&&(e[t]={icon:n})},s=e=>"object"==typeof e&&null!==e&&(void 0===e.style||(0,i.a)(e.style))&&(void 0===e.label||(0,i.i)(e.label))&&(0,i.i)(e.icon,1),l=(e,t,n={})=>{(0,o.o)(t,(()=>{var l;try{t=(0,o.p)(t)}catch(e){}(0,o.w)(e,"_icons",(e=>{const t="object"==typeof e&&null!==e&&0===Object.keys(e).length;return null===e||t||(0,i.i)(e,1)||"object"==typeof e&&null!==e&&((0,i.i)(e.left,1)||s(e.left)||(0,i.i)(e.right,1)||s(e.right)||(0,i.i)(e.top,1)||s(e.top)||(0,i.i)(e.bottom,1)||s(e.bottom))}),new Set(["KoliBriIcon"]),t,Object.assign(Object.assign({},n),{defaultValue:{},hooks:{afterPatch:null===(l=n.hooks)||void 0===l?void 0:l.afterPatch,beforePatch:(e,t,o,s)=>{var l,c;"function"==typeof(null===(l=n.hooks)||void 0===l?void 0:l.beforePatch)&&(null===(c=n.hooks)||void 0===c||c.beforePatch(e,t,o,s)),(e=>{var t,n,o;if(null===(t=e.nextState)||void 0===t?void 0:t.has("_icons")){const t=null===(n=e.nextState)||void 0===n?void 0:n.get("_icons");null===(o=e.nextState)||void 0===o||o.set("_icons",(e=>{let t={};return(0,i.i)(e,1)?t={left:{icon:e}}:"object"==typeof e&&null!==e&&(a(t,"top",e.top),a(t,"right",e.right),a(t,"bottom",e.bottom),a(t,"left",e.left)),t})(t))}})(o)}}}))}))}}}]);

package/dist/5359.js

@@ -1,2 +0,0 @@
-/*! For license information please see 5359.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[5359],{3648:(e,t,i)=>{i.d(t,{b:()=>r,p:()=>n,s:()=>o});let n="development";try{n="production"}catch(e){n="production"}const o=e=>""===e,r=(e,t)=>e||t||""},4208:(e,t,i)=>{i.d(t,{i:()=>s,n:()=>c,r:()=>a});var n=i(7386),o=i(3648),r=i(3051);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 | ${n.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"===o.p&&(c=()=>"nonce")},5359:(e,t,i)=>{i.r(t),i.d(t,{initialize:()=>a});var n=i(4208),o=i(3051),r=i(3892);function l(e,t){try{Object.defineProperty((()=>{let e=(0,o.d)().KoliBri;return void 0===e&&(e={},Object.defineProperty((0,o.d)(),"KoliBri",{value:e,writable:!1})),e})(),e,{get:function(){return t}})}catch(t){o.L.debug(`KoliBri property ${e} is already bind.`)}}const s=(e,t)=>o.L.debug(`${e} ${t?"":"not "}activated`),a=()=>{if((0,n.i)(),(0,o.e)()){(0,n.r)(),l("a11yColorContrast",r.y),l("querySelector",r.t),l("querySelectorAll",r.z),l("querySelectorColors",r.A),l("utils",(function(){return r.B})),l("parseJson",r.p),l("stringifyJson",r.C);const e=(0,o.g)().body,t=(0,o.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,o.g)().body.appendChild(t),s("Development mode",(0,o.e)()),s("Experimental mode",(0,o.a)()),s("Color contrast analysis",(0,o.f)()),(0,o.f)()){const t=setTimeout((()=>{clearTimeout(t),setInterval((()=>{r.B.queryHtmlElementColors((0,o.g)().createElement("div"),(0,r.y)(e),!1,!1)}),1e4)}),2500)}}}}}]);

package/dist/740.js

@@ -1,2 +0,0 @@
-/*! For license information please see 740.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[740],{3648:(e,t,o)=>{o.d(t,{b:()=>r,p:()=>s,s:()=>i});let s="development";try{s="production"}catch(e){s="production"}const i=e=>""===e,r=(e,t)=>e||t||""},4389:(e,t,o)=>{o.r(t),o.d(t,{kol_popover_wc:()=>v});var s=o(7386),i=o(5836),r=o(8045),n=o(3694),l=o(3892),h=o(3051),a=o(5477),c=o(5006);const v=class{constructor(e){(0,s.r)(this,e),this.hidePopoverByEscape=e=>{"Escape"===e.key&&this.hidePopover(e)},this.hidePopoverByClickOutside=e=>{this.host&&!this.host.contains(e.target)&&this.hidePopover(e)},this.catchHostAndTriggerElement=e=>{e&&(this.host=e,this.triggerElement=e.previousElementSibling)},this.catchPopoverElement=e=>{this.popoverElement=e},this.catchArrowElement=e=>{this.arrowElement=e},this._align="top",this._on=void 0,this._show=!1,this.state={_align:"top",_on:{},_show:!1,_visible:!1}}showPopover(){return e=this,t=function*(){this.addListenersToBody(),this.triggerElement&&this.popoverElement&&(yield(0,i.a)({align:this._align,referenceElement:this.triggerElement,arrowElement:this.arrowElement,floatingElement:this.popoverElement}),this.state=Object.assign(Object.assign({},this.state),{_visible:!0}))},new Promise(((o,s)=>{var i=e=>{try{n(t.next(e))}catch(e){s(e)}},r=e=>{try{n(t.throw(e))}catch(e){s(e)}},n=e=>e.done?o(e.value):Promise.resolve(e.value).then(i,r);n((t=t.apply(e,null)).next())}));var e,t}hidePopover(e){var t,o,s;this.state=Object.assign(Object.assign({},this.state),{_visible:!1}),this._show=!1,null===(t=this.triggerElement)||void 0===t||t.focus(),this.removeListenersToBody(),null===(s=null===(o=this.state._on)||void 0===o?void 0:o.onClose)||void 0===s||s.call(o,e),this.host&&(0,n.d)(this.host,n.K.close)}addListenersToBody(){var e;const t=(0,h.g)().body;t.addEventListener("keyup",this.hidePopoverByEscape),t.addEventListener("click",this.hidePopoverByClickOutside),null===(e=document.scrollingElement)||void 0===e||e.addEventListener("scroll",(()=>{this.showPopover()}),{passive:!0})}removeListenersToBody(){var e;const t=(0,h.g)().body;t.removeEventListener("keyup",this.hidePopoverByEscape),t.removeEventListener("click",this.hidePopoverByClickOutside),null===(e=document.scrollingElement)||void 0===e||e.removeEventListener("scroll",(()=>{this.showPopover()}))}render(){return(0,s.h)(s.H,{key:"23e4ea8f366f0263df0099ee1f804412ccd05892",ref:this.catchHostAndTriggerElement,class:"kol-popover"},(0,s.h)("div",{key:"f0b966725406619aecf64015f1cdebe11c24b047",class:(0,r.c)("kol-popover__content",{"kol-popover__content--visible":this.state._visible}),ref:this.catchPopoverElement,hidden:!this.state._show},(0,s.h)("div",{key:"629b53f52ff434ef87738dfccb8c346a15f39c40",class:(0,r.c)("kol-popover__arrow",`kol-popover__arrow--${this.state._align}`),ref:this.catchArrowElement}),(0,s.h)("slot",{key:"afa7350520898288c61b7f65b07978c9a81c7289"})))}validateAlign(e){(0,a.v)(this,e)}validateOn(e){((e,t)=>{(0,l.w)(e,"_on",(e=>"object"==typeof e&&null!==e),new Set(["PopoverCallbacksPropType {Events.onClose}"]),t)})(this,e)}validateShow(e){(0,c.v)(this,e),e&&this.showPopover()}componentWillLoad(){this.validateAlign(this._align),this.validateShow(this._show)}static get watchers(){return{_align:["validateAlign"],_on:["validateOn"],_show:["validateShow"]}}}},5006:(e,t,o)=>{o.d(t,{v:()=>i});var s=o(3892);const i=(e,t,o)=>{(0,s.b)(e,"_show",t,o)}},8045:(e,t,o)=>{function s(e){var t,o,i="";if("string"==typeof e||"number"==typeof e)i+=e;else if("object"==typeof e)if(Array.isArray(e)){var r=e.length;for(t=0;t<r;t++)e[t]&&(o=s(e[t]))&&(i&&(i+=" "),i+=o)}else for(o in e)e[o]&&(i&&(i+=" "),i+=o);return i}function i(){for(var e,t,o=0,i="",r=arguments.length;o<r;o++)(e=arguments[o])&&(t=s(e))&&(i&&(i+=" "),i+=t);return i}o.d(t,{c:()=>i})}}]);