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

package/src/components/table/stateful-with-selection.tsx

@@ -10,6 +10,8 @@ import { useToasterService } from '../../hooks/useToasterService';
 const DATA = [
 	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },
 	{ id: '1002', name: 'Foo Baz', internalIdentifier: `AAA1002` },
+	{ id: '1003', name: 'This row is always unchecked', internalIdentifier: `AAA1003` },
+	{ id: '1004', name: 'This row is always checked', internalIdentifier: `AAA1004` },
 ];
 type Data = (typeof DATA)[0];
 
@@ -28,7 +30,8 @@ export const TableStatefulWithSelection: FC = () => {
 
 	const selection: KoliBriTableSelection = {
 		label: (row) => `Selection for ${(row as Data).name}`,
-		selectedKeys: selectedValue ? selectedValue.map((element) => element.internalIdentifier) : [],
+		selectedKeys: selectedValue ? selectedValue.map((element) => element.internalIdentifier) : ['AAA1004'],
+		disabledKeys: ['AAA1003', 'AAA1004'],
 		keyPropertyName: 'internalIdentifier',
 	};
 

package/src/components/table/stateless-with-selection.tsx

@@ -10,6 +10,8 @@ import { useToasterService } from '../../hooks/useToasterService';
 const DATA = [
 	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },
 	{ id: '1002', name: 'Foo Baz', internalIdentifier: `AAA1002` },
+	{ id: '1003', name: 'This row is always unchecked', internalIdentifier: `AAA1003` },
+	{ id: '1004', name: 'This row is always checked', internalIdentifier: `AAA1004` },
 ];
 type Data = (typeof DATA)[0];
 
@@ -24,12 +26,13 @@ function KolButtonWrapper({ label }: { label: string }) {
 }
 
 export const TableStatelessWithSelection: FC = () => {
-	const [selectedKeys, setSelectedKeys] = useState(['AAA1002']);
+	const [selectedKeys, setSelectedKeys] = useState(['AAA1002', 'AAA1004']);
 
 	const selection: KoliBriTableSelection = {
 		label: (row) => `Selection for ${(row as Data).name}`,
 		selectedKeys,
 		keyPropertyName: 'internalIdentifier',
+		disabledKeys: ['AAA1003', 'AAA1004'],
 	};
 
 	const kolTableStatelessRef = useRef<HTMLKolTableStatelessElement>(null);

package/src/components/table/stateless-with-single-selection.tsx

@@ -10,6 +10,7 @@ import { useToasterService } from '../../hooks/useToasterService';
 const DATA = [
 	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },
 	{ id: '1002', name: 'Foo Baz', internalIdentifier: `AAA1002` },
+	{ id: '1003', name: 'Foo Disabled', internalIdentifier: `AAA1003` },
 ];
 type Data = (typeof DATA)[0];
 
@@ -30,6 +31,7 @@ export const TableStatelessWithSingleSelection: FC = () => {
 		label: (row) => `Selection for ${(row as Data).name}`,
 		multiple: false,
 		selectedKeys,
+		disabledKeys: ['AAA1003'],
 		keyPropertyName: 'internalIdentifier',
 	};
 

package/src/components/tree/basic.tsx

@@ -34,6 +34,7 @@ export const TreeBasic: FC = () => {
 			<KolTree _label="Sitemap" class="block w-fit">
 				<KolTreeItem _label={homeLabel} {...getItemProps('home')}></KolTreeItem>
 				<KolTreeItem _label="2 About (open initially)" {...getItemProps('about')} _open>
+					<KolTreeItem _label="2.0 Legal" {...getItemProps('legal')}></KolTreeItem>
 					<KolTreeItem _label="2.1 Team" {...getItemProps('team')}>
 						<KolTreeItem _label="2.1.1. Values" {...getItemProps('values')}></KolTreeItem>
 						<KolTreeItem _label="2.1.2. Members" {...getItemProps('members')}>
@@ -65,7 +66,7 @@ export const TreeBasic: FC = () => {
 
 			<p>Current tree item: {subPage ?? 'none'}</p>
 
-			<div className="flex flex-row gap-2">
+			<div className="flex flex-wrap gap-2">
 				<KolButton _label="Change label for '1 Home'" _on={{ onClick: updateHomeLabel }}></KolButton>
 				<KolButton _label="Toggle '2.1.2.2 Pets'" _on={{ onClick: () => setShowPets(!showPets) }}></KolButton>
 				<KolButton _label="Toggle '2.2.1 Europe' (two levels at once)" _on={{ onClick: () => setShowEurope(!showEurope) }}></KolButton>

package/src/react.main.tsx

@@ -5,7 +5,7 @@ import { setTagNameTransformer } from '@public-ui/react';
 
 import { bootstrap, KoliBriDevHelper } from '@public-ui/components';
 import { defineCustomElements } from '@public-ui/components/dist/loader';
-import { DEFAULT } from '@public-ui/theme-default';
+import { DEFAULT, ECL_EC, ECL_EU } from '@public-ui/themes';
 
 import { App } from './App';
 
@@ -34,17 +34,8 @@ const getThemes = async () => {
 		return [theme];
 	}
 
-	const optionalThemes: Theme[] = [];
-	const { ECL_EC, ECL_EU } = await import('@public-ui-/theme-ecl');
-
-	if (ECL_EC && ECL_EU) {
-		optionalThemes.push(ECL_EC, ECL_EU);
-	} else {
-		console.warn('Theme package @public-ui-/theme-ecl not available. Continuing without it.');
-	}
-
 	/* List of regular sample app themes */
-	return [DEFAULT, ...optionalThemes] as Theme[];
+	return [DEFAULT, ECL_EC, ECL_EU] as Theme[];
 };
 
 void (async () => {

package/src/scenarios/change-tabindex.tsx

@@ -37,7 +37,7 @@ export const ChangeTabindex: FC = () => {
 
 			<div className="w-full grid gap-4">
 				<KolCard _label="Button" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolButton _label="Button 1, Tabindex 4" _variant="primary" tabIndex={4} />
 						<KolButton _disabled _label="Button 2, Tabindex 3" _variant="primary" tabIndex={3} />
 						<KolButton _label="Button 3, Tabindex 2" _variant="primary" tabIndex={2} />
@@ -46,7 +46,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="ButtonLink" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolButtonLink _label="ButtonLink 1, Tabindex 4" tabIndex={4} />
 						<KolButtonLink _disabled _label="ButtonLink 2, Tabindex 3" tabIndex={3} />
 						<KolButtonLink _label="ButtonLink 3, Tabindex 2" tabIndex={2} />
@@ -55,7 +55,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="Combobox" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolCombobox _hint={HINT_MSG} _label="Combobox 1, Tabindex 4" _suggestions={COUNTRY_SUGGESTIONS} _value={'Deutschland'} tabIndex={4} />
 						<KolCombobox _disabled _hint={HINT_MSG} _label="Combobox 2, Tabindex 3" _suggestions={COUNTRY_SUGGESTIONS} _value={'Deutschland'} tabIndex={3} />
 						<KolCombobox
@@ -72,7 +72,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="InputCheckbox" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolInputCheckbox _label="InputCheckbox 4, Tabindex 1" _value={false} tabIndex={4} />
 						<KolInputCheckbox _disabled _label="InputCheckbox 3, Tabindex 2" _value={false} tabIndex={3} />
 						<KolInputCheckbox _touched _label="InputCheckbox 2, Tabindex 3" _msg={{ _type: 'error', _description: ERROR_MSG }} _value={false} tabIndex={2} />
@@ -81,7 +81,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="InputColor" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolInputColor _value="#f08080" _label="InputCheckbox 1, Tabindex 4" tabIndex={4} />
 						<KolInputColor _disabled _value="#f08080" _label="InputCheckbox 2, Tabindex 3" tabIndex={3} />
 						<KolInputColor _touched _value="#f08080" _label="InputCheckbox 3, Tabindex 2" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />
@@ -90,7 +90,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="InputDate" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolInputDate _type="datetime-local" _label="InputCheckbox 1, Tabindex 4" tabIndex={4} />
 						<KolInputDate _disabled _type="datetime-local" _label="InputCheckbox 2, Tabindex 3" tabIndex={3} />
 						<KolInputDate
@@ -105,7 +105,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="InputEmail" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolInputEmail _label="InputEmail 1, Tabindex 4" tabIndex={4} />
 						<KolInputEmail _disabled _label="InputEmail 2, Tabindex 3" tabIndex={3} />
 						<KolInputEmail _touched _label="InputEmail 3, Tabindex 2" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />
@@ -114,7 +114,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="InputFile" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolInputFile _label="InputFile 1, Tabindex 4" tabIndex={4} />
 						<KolInputFile _disabled _label="InputFile 2, Tabindex 3" tabIndex={3} />
 						<KolInputFile _touched _label="InputFile 3, Tabindex 2" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />
@@ -123,7 +123,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="InputNumber" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolInputNumber _label="InputNumber 1, Tabindex 4" tabIndex={4} />
 						<KolInputNumber _disabled _label="InputNumber 2, Tabindex 3" tabIndex={3} />
 						<KolInputNumber _touched _label="InputNumber 3, Tabindex 2" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />
@@ -132,7 +132,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="InputPassword" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolInputPassword _label="InputPassword 1, Tabindex 4" tabIndex={4} />
 						<KolInputPassword _disabled _label="InputPassword 2, Tabindex 3" tabIndex={3} />
 						<KolInputPassword _touched _label="InputPassword 3, Tabindex 2" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />
@@ -141,7 +141,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="InputRadio" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolInputRadio
 							_options="[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)','value':'Mr.'},{'label':'Company','value':'Company'}]"
 							_label="InputRadio 1, Tabindex 4"
@@ -169,7 +169,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="InputRange" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolInputRange _label="InputRange 1, Tabindex 4" _min={0} _max={50} tabIndex={4} />
 						<KolInputRange _disabled _label="InputRange 2, Tabindex 3" _min={0} _max={50} tabIndex={3} />
 						<KolInputRange _touched _label="InputRange 3, Tabindex 2" _min={0} _max={50} _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />
@@ -178,7 +178,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="InputText" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolInputText _label="InputText 1, Tabindex 4" tabIndex={4} />
 						<KolInputText _disabled _label="InputText 2, Tabindex 3" tabIndex={3} />
 						<KolInputText _touched _label="InputText 3, Tabindex 2" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />
@@ -187,7 +187,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="LinkButton" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolLinkButton _href={'#/back-page'} _label="InputText 1, Tabindex 4" _variant="primary" tabIndex={4}></KolLinkButton>
 						<KolLinkButton _disabled _href={'#/back-page'} _label="InputText 2, Tabindex 3" _variant="primary" tabIndex={3}></KolLinkButton>
 						<KolLinkButton _href={'#/back-page'} _label="InputText 3, Tabindex 2" _variant="primary" tabIndex={2}></KolLinkButton>
@@ -196,14 +196,16 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="Link" _level={0}>
-					<KolLink _href="#/back-page" _label="InputText 1, Tabindex 4" tabIndex={4} />
-					<KolLink _disabled _href="#/back-page" _label="InputText 2, Tabindex 3" tabIndex={3} />
-					<KolLink _href="#/back-page" _label="InputText 3, Tabindex 2" tabIndex={2} />
-					<KolLink _href="#/back-page" _label="InputText 4, Tabindex 1" tabIndex={1} />
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
+						<KolLink _href="#/back-page" _label="InputText 1, Tabindex 4" tabIndex={4} />
+						<KolLink _disabled _href="#/back-page" _label="InputText 2, Tabindex 3" tabIndex={3} />
+						<KolLink _href="#/back-page" _label="InputText 3, Tabindex 2" tabIndex={2} />
+						<KolLink _href="#/back-page" _label="InputText 4, Tabindex 1" tabIndex={1} />
+					</div>
 				</KolCard>
 
 				<KolCard _label="SingleSelect" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolSingleSelect _label="InputText 1, Tabindex 4" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} tabIndex={4} />
 						<KolSingleSelect _disabled _label="InputText 2, Tabindex 3" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} tabIndex={3} />
 						<KolSingleSelect
@@ -219,7 +221,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="SplitButton" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolSplitButton _label="InputText 1, Tabindex 4" tabIndex={4}>
 							Dropdown-Inhalt
 						</KolSplitButton>
@@ -228,7 +230,7 @@ export const ChangeTabindex: FC = () => {
 						</KolSplitButton>
 						<KolSplitButton _label="InputText 3, Tabindex 2" tabIndex={2}>
 							Dropdown-Inhalt
-						</KolSplitButton>{' '}
+						</KolSplitButton>
 						<KolSplitButton _label="InputText 4, Tabindex 1" tabIndex={1}>
 							Dropdown-Inhalt
 						</KolSplitButton>
@@ -236,7 +238,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="Textarea" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolTextarea _label="Textarea 1, Tabindex 4" _rows={3} _placeholder="Placeholder" tabIndex={4} />
 						<KolTextarea _disabled _label="Textarea 2, Tabindex 3" _rows={3} _placeholder="Placeholder" tabIndex={3} />
 						<KolTextarea

package/src/style.scss

@@ -23,13 +23,20 @@ hr {
 
 .indented-text {
 	p {
-		font-family: var(--font-family);
-		border-left: -2px solid var(--color-primary-variant);
-		padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));
-		margin-left: rem(-2);
+		margin: 0;
 	}
 }
 
+.visually-hidden {
+	clip: rect(0 0 0 0);
+	clip-path: inset(50%);
+	height: 1px;
+	overflow: hidden;
+	position: absolute;
+	white-space: nowrap;
+	width: 1px;
+}
+
 .black-background {
 	background-color: black;
 	display: flex;
@@ -41,6 +48,10 @@ hr {
 	width: 500px;
 }
 
+.drawer-content-vertical {
+	width: rem(400);
+}
+
 @media (min-width: 1024px) {
 	.app-container {
 		display: grid;

package/unocss.config.ts

@@ -13,131 +13,130 @@ function convertDynamicClassValueToRem(value: string) {
 	return pxValueToRem(Number.parseFloat(value) * 16 / 4);
 }
 
-// ts-prune-ignore-next
 export default defineConfig({
 	rules: [
-		[/^p-(\d+)$/, ([, d]) => ({ 
-			padding: convertDynamicClassValueToRem(d) 
+		[/^p-(\d+)$/, ([, d]) => ({
+			padding: convertDynamicClassValueToRem(d)
 		})],
 
-		[/^px-(\d+)$/, ([, d]) => ({ 
+		[/^px-(\d+)$/, ([, d]) => ({
 			'padding-left': convertDynamicClassValueToRem(d),
-			'padding-right': convertDynamicClassValueToRem(d)  
+			'padding-right': convertDynamicClassValueToRem(d)
 		})],
-		[/^py-(\d+)$/, ([, d]) => ({ 
+		[/^py-(\d+)$/, ([, d]) => ({
 			'padding-top': convertDynamicClassValueToRem(d),
-			'padding-bottom': convertDynamicClassValueToRem(d)  
+			'padding-bottom': convertDynamicClassValueToRem(d)
 		})],
 
-		[/^ps-(\d+)$/, ([, d]) => ({ 
-			'padding-inline-start': convertDynamicClassValueToRem(d) 
+		[/^ps-(\d+)$/, ([, d]) => ({
+			'padding-inline-start': convertDynamicClassValueToRem(d)
 		})],
-		[/^pe-(\d+)$/, ([, d]) => ({ 
-			'padding-inline-end': convertDynamicClassValueToRem(d) 
+		[/^pe-(\d+)$/, ([, d]) => ({
+			'padding-inline-end': convertDynamicClassValueToRem(d)
 		})],
 
-		[/^pt-(\d+)$/, ([, d]) => ({ 
-			'padding-top': convertDynamicClassValueToRem(d) 
+		[/^pt-(\d+)$/, ([, d]) => ({
+			'padding-top': convertDynamicClassValueToRem(d)
 		})],
-		[/^pl-(\d+)$/, ([, d]) => ({ 
-			'padding-left': convertDynamicClassValueToRem(d) 
+		[/^pl-(\d+)$/, ([, d]) => ({
+			'padding-left': convertDynamicClassValueToRem(d)
 		})],
-		[/^pr-(\d+)$/, ([, d]) => ({ 
-			'padding-right': convertDynamicClassValueToRem(d) 
+		[/^pr-(\d+)$/, ([, d]) => ({
+			'padding-right': convertDynamicClassValueToRem(d)
 		})],
-		[/^pb-(\d+)$/, ([, d]) => ({ 
-			'padding-bottom': convertDynamicClassValueToRem(d) 
+		[/^pb-(\d+)$/, ([, d]) => ({
+			'padding-bottom': convertDynamicClassValueToRem(d)
 		})],
 
-		[/^p-t-(\d+)$/, ([, d]) => ({ 
-			'padding-top': convertDynamicClassValueToRem(d) 
+		[/^p-t-(\d+)$/, ([, d]) => ({
+			'padding-top': convertDynamicClassValueToRem(d)
 		})],
-		[/^p-l-(\d+)$/, ([, d]) => ({ 
-			'padding-left': convertDynamicClassValueToRem(d) 
+		[/^p-l-(\d+)$/, ([, d]) => ({
+			'padding-left': convertDynamicClassValueToRem(d)
 		})],
-		[/^p-r-(\d+)$/, ([, d]) => ({ 
-			'padding-right': convertDynamicClassValueToRem(d) 
+		[/^p-r-(\d+)$/, ([, d]) => ({
+			'padding-right': convertDynamicClassValueToRem(d)
 		})],
-		[/^p-b-(\d+)$/, ([, d]) => ({ 
-			'padding-bottom': convertDynamicClassValueToRem(d) 
+		[/^p-b-(\d+)$/, ([, d]) => ({
+			'padding-bottom': convertDynamicClassValueToRem(d)
 		})],
 
-		[/^m-(\d+)$/, ([, d]) => ({ 
-			margin: convertDynamicClassValueToRem(d) 
+		[/^m-(\d+)$/, ([, d]) => ({
+			margin: convertDynamicClassValueToRem(d)
 		})],
 
-		[/^mx-(\d+)$/, ([, d]) => ({ 
+		[/^mx-(\d+)$/, ([, d]) => ({
 			'margin-left': convertDynamicClassValueToRem(d),
-			'margin-right': convertDynamicClassValueToRem(d)  
+			'margin-right': convertDynamicClassValueToRem(d)
 		})],
-		[/^my-(\d+)$/, ([, d]) => ({ 
+		[/^my-(\d+)$/, ([, d]) => ({
 			'margin-top': convertDynamicClassValueToRem(d),
-			'margin-bottom': convertDynamicClassValueToRem(d)  
+			'margin-bottom': convertDynamicClassValueToRem(d)
 		})],
 
-		[/^ms-(\d+)$/, ([, d]) => ({ 
-			'margin-inline-start': convertDynamicClassValueToRem(d) 
+		[/^ms-(\d+)$/, ([, d]) => ({
+			'margin-inline-start': convertDynamicClassValueToRem(d)
 		})],
-		[/^me-(\d+)$/, ([, d]) => ({ 
-			'margin-inline-end': convertDynamicClassValueToRem(d) 
+		[/^me-(\d+)$/, ([, d]) => ({
+			'margin-inline-end': convertDynamicClassValueToRem(d)
 		})],
 
-		[/^mt$/, ([, d]) => ({ 
-			'margin-top': pxValueToRem(16) 
+		[/^mt$/, ([, d]) => ({
+			'margin-top': pxValueToRem(16)
 		})],
-		[/^ml$/, ([, d]) => ({ 
-			'margin-left': pxValueToRem(16) 
+		[/^ml$/, ([, d]) => ({
+			'margin-left': pxValueToRem(16)
 		})],
-		[/^mr$/, ([, d]) => ({ 
-			'margin-right': pxValueToRem(16) 
+		[/^mr$/, ([, d]) => ({
+			'margin-right': pxValueToRem(16)
 		})],
-		[/^mb$/, ([, d]) => ({ 
-			'margin-bottom': pxValueToRem(16) 
+		[/^mb$/, ([, d]) => ({
+			'margin-bottom': pxValueToRem(16)
 		})],
 
-		[/^mt-(\d+)$/, ([, d]) => ({ 
-			'margin-top': convertDynamicClassValueToRem(d) 
+		[/^mt-(\d+)$/, ([, d]) => ({
+			'margin-top': convertDynamicClassValueToRem(d)
 		})],
-		[/^ml-(\d+)$/, ([, d]) => ({ 
-			'margin-left': convertDynamicClassValueToRem(d) 
+		[/^ml-(\d+)$/, ([, d]) => ({
+			'margin-left': convertDynamicClassValueToRem(d)
 		})],
-		[/^mr-(\d+)$/, ([, d]) => ({ 
-			'margin-right': convertDynamicClassValueToRem(d) 
+		[/^mr-(\d+)$/, ([, d]) => ({
+			'margin-right': convertDynamicClassValueToRem(d)
 		})],
-		[/^mb-(\d+)$/, ([, d]) => ({ 
-			'margin-bottom': convertDynamicClassValueToRem(d) 
+		[/^mb-(\d+)$/, ([, d]) => ({
+			'margin-bottom': convertDynamicClassValueToRem(d)
 		})],
 
-		[/^m-t-(\d+)$/, ([, d]) => ({ 
-			'margin-top': convertDynamicClassValueToRem(d) 
+		[/^m-t-(\d+)$/, ([, d]) => ({
+			'margin-top': convertDynamicClassValueToRem(d)
 		})],
-		[/^m-l-(\d+)$/, ([, d]) => ({ 
-			'margin-left': convertDynamicClassValueToRem(d) 
+		[/^m-l-(\d+)$/, ([, d]) => ({
+			'margin-left': convertDynamicClassValueToRem(d)
 		})],
-		[/^m-r-(\d+)$/, ([, d]) => ({ 
-			'margin-right': convertDynamicClassValueToRem(d) 
+		[/^m-r-(\d+)$/, ([, d]) => ({
+			'margin-right': convertDynamicClassValueToRem(d)
 		})],
-		[/^m-b-(\d+)$/, ([, d]) => ({ 
-			'margin-bottom': convertDynamicClassValueToRem(d) 
+		[/^m-b-(\d+)$/, ([, d]) => ({
+			'margin-bottom': convertDynamicClassValueToRem(d)
 		})],
 
-		[/^mb-sm$/, ([, d]) => ({ 
-			'margin-bottom': pxValueToRem(14) 
+		[/^mb-sm$/, ([, d]) => ({
+			'margin-bottom': pxValueToRem(14)
 		})],
 
 		[/^gap-(\d+)$/, ([, d]) => ({ gap: convertDynamicClassValueToRem(d) })],
 		[/^gap-x-(\d+)$/, ([, d]) => ({ 'column-gap': convertDynamicClassValueToRem(d) })],
 		[/^gap-y-(\d+)$/, ([, d]) => ({ 'row-gap': convertDynamicClassValueToRem(d) })],
-	
-		[/^w-(\d+)rem$/, ([, d]) => ({ 
-			width: pxValueToRem(Number.parseInt(d) * 16) 
+
+		[/^w-(\d+)rem$/, ([, d]) => ({
+			width: pxValueToRem(Number.parseInt(d) * 16)
 		})],
 
-		[/^w-sm$/, () => ({ 
+		[/^w-sm$/, () => ({
 			width: pxValueToRem(24 * 16) // 24rem
 		})],
 	],
-	extendTheme: (theme: any) => { 
+	extendTheme: (theme: any) => {
 		return {
 			...theme,
 			fontSize: {

package/webpack.config.js

@@ -1,11 +1,20 @@
 const webpack = require('webpack');
 
-const OPTIONAL_THEME_PACKAGE = '@public-ui-/theme-ecl';
+/**
+ * @returns {null|string}
+ */
+function getGitCommitHash() {
+	try {
+		return require('child_process').execSync('git rev-parse --short HEAD 2>/dev/null').toString().trim();
+	} catch (e) {
+		return null;
+	}
+}
 
 module.exports = (...args) => {
 	const config = require('@leanup/stack-react/webpack.config')(...args);
 	const UnoCSS = require('@unocss/webpack').default;
-	const commitHash = require('child_process').execSync('git rev-parse --short HEAD').toString().trim();
+
 	config.plugins.push(UnoCSS());
 	config.plugins.push(
 		new webpack.EnvironmentPlugin({
@@ -15,29 +24,9 @@ module.exports = (...args) => {
 			ENABLE_TAG_NAME_TRANSFORMER: '',
 			ENABLE_THEME_PATCHING: '',
 			BUILD_DATE: new Date().toISOString(),
-			COMMIT_HASH: commitHash,
+			COMMIT_HASH: getGitCommitHash(),
 		}),
 	);
 	delete config.devServer.proxy;
-
-	config.externals = [
-		...(config.externals || []),
-
-		/* Handle optional theme dependencies */
-		({ request }, callback) => {
-			if (request === OPTIONAL_THEME_PACKAGE) {
-				try {
-					require.resolve(OPTIONAL_THEME_PACKAGE);
-					// Package exists, include it
-					return callback();
-				} catch (e) {
-					// Package doesn't exist, replace with empty module
-					return callback(null, 'null');
-				}
-			}
-			callback();
-		},
-	];
-
 	return config;
 };

package/dist/1068.js

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

package/dist/1219.js

@@ -1,2 +0,0 @@
-/*! For license information please see 1219.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[1219],{5126:(e,t,n)=>{n.d(t,{K:()=>a});var i=n(1290),o=n(4957);const a=e=>{const{class:t,style:n,icons:a,label:s,onClick:l}=e;return(0,i.h)(o.d,{class:t,style:n,onClick:l,_icons:a,_label:s})}},6884:(e,t,n)=>{n.d(t,{K:()=>r});var i=n(4600),o=n(1290),a=n(9060),s=n(1416),l=n(9732);const r=e=>{const{class:t,msg:n,required:r,disabled:d,touched:c,readonly:h,ariaDescribedBy:u,hideLabel:p,label:m,suggestions:v,value:g}=e,_=(0,i._)(e,["class","msg","required","disabled","touched","readonly","ariaDescribedBy","hideLabel","label","suggestions","value"]),b=(0,l.c)(n,c),f={"kol-input--disabled":Boolean(d),"kol-input--required":Boolean(r),"kol-input--touched":Boolean(c),"kol-input--readonly":Boolean(h),[`kol-input--${(null==n?void 0:n.type)||"error"}`]:b},y=Object.assign(Object.assign({class:(0,a.c)("kol-input",f,t),required:r,disabled:d,readonly:h,type:"text",list:v?`${_.id}-list`:void 0},(0,s.d)({ariaDescribedBy:u,hideLabel:p,label:m})),_);return(0,o.h)(o.F,null,(0,o.h)("input",Object.assign({},y,{value:g})),v)}},4746:(e,t,n)=>{n.d(t,{K:()=>d,a:()=>r});var i=n(4600),o=n(1290),a=n(1416),s=n(6884),l=n(9732);const r=e=>{var{id:t,suggestions:n}=e,a=(0,i._)(e,["id","suggestions"]);return n?(0,o.h)("datalist",Object.assign({id:`${t}-list`},a),n.map((e=>(0,o.h)("option",{value:e})))):null},d=e=>{var{state:t,customSuggestions:n}=e,d=(0,i._)(e,["state","customSuggestions"]);return(0,o.h)(s.K,Object.assign({},function(e,t){const{ariaDescribedBy:n}=(0,a.g)(e),i={id:e._id,hideLabel:e._hideLabel,label:e._label,accessKey:e._accessKey,disabled:e._disabled,name:e._name,ariaDescribedBy:n};return"_type"in e&&(i.type=e._type),"_value"in e&&(i.value=e._value),"_required"in e&&(i.required=e._required),"_maxLength"in e&&(i.maxlength=e._maxLength),"_placeholder"in e&&(i.placeholder=e._placeholder),"_autoComplete"in e&&(i.autoComplete=e._autoComplete),"_spellCheck"in e&&(i.spellcheck=e._spellCheck),"_pattern"in e&&(i.pattern=e._pattern),"_readOnly"in e&&(i.readonly=e._readOnly),"_min"in e&&(i.min=e._min),"_max"in e&&(i.max=e._max),"_step"in e&&(i.step=e._step),"_multiple"in e&&(i.multiple=e._multiple),"_checked"in e&&(i.checked=e._checked),"_indeterminate"in e&&(i.indeterminate=e._indeterminate),"_touched"in e&&(i.touched=e._touched),"_msg"in e&&(i.msg=(0,l.a)(e._msg)),"_suggestions"in e&&!t&&Array.isArray(e._suggestions)&&e._suggestions.length>0&&(i.suggestions=(0,o.h)(r,{id:e._id,suggestions:e._suggestions})),i}(t,n),d))}},359:(e,t,n)=>{n.d(t,{a:()=>l,p:()=>r});var i=n(4957),o=n(5800),a=n(1732);const s=e=>{for((0,a.a)()&&((0,o.j)("↓ Search form element start."),a.L.debug(e));e instanceof HTMLElement&&"FORM"!==e.tagName&&e.tagName!==i.h.toUpperCase();){try{e=e.parentElement instanceof HTMLElement?e.parentElement:e.parentNode instanceof ShadowRoot?e.parentNode.host:null}catch(e){}(0,a.a)()&&(a.L.debug(e),(0,o.j)("↑ Search form element finished."))}return e},l=(e={})=>{var 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,o.q)(e,a),a.dispatchEvent(e);else if(a.tagName===i.h.toUpperCase()){(0,o.q)(e,o.K.querySelector("form",a));const i=a;"function"==typeof(null===(t=i._on)||void 0===t?void 0:t.onReset)&&(null===(n=i._on)||void 0===n||n.onReset(e))}}},r=(e={})=>{const t=s(e.form);if(t instanceof HTMLElement){const e=new SubmitEvent("submit",{bubbles:!0,cancelable:!0,submitter:t});if("FORM"===t.tagName)(0,a.a)()&&!1===t.noValidate&&(0,o.j)("If you have not focusable or hidden form fields in your form, you should enable noValidate for your form.",{force:!0}),setTimeout((()=>{"function"==typeof t.requestSubmit?t.requestSubmit():((0,o.q)(e,t),t.dispatchEvent(e))}));else if(t.tagName===i.h.toUpperCase()){(0,o.q)(e,o.K.querySelector("form",t));const n=t;setTimeout((()=>{var t,i;"function"==typeof(null===(t=n._on)||void 0===t?void 0:t.onSubmit)&&(null===(i=n._on)||void 0===i||i.onSubmit(e))}))}}}},7617:(e,t,n)=>{n.d(t,{I:()=>S,K:()=>k,a:()=>y});var i=n(1290),o=n(3426),a=n(665),s=n(4600),l=n(4957),r=n(5126),d=n(9060),c=n(9732),h=n(1416),u=n(8973),p=n(5800),m=n(608);const v=(e,t)=>{var{position:n="start",class:o}=e,a=(0,s._)(e,["position","class"]);const l="kol-input-container__adornment",r=`${l}--${n}`;return(0,i.h)("div",Object.assign({class:(0,d.c)(l,r,o)},a),t)};function g(e){return!!e&&(Array.isArray(e)?e.length>0:Boolean(e))}const _=(e,t)=>{var{class:n}=e,o=(0,s._)(e,["class"]);return(0,i.h)("div",Object.assign({class:(0,d.c)("kol-input-container__container",n)},o),t)},b=(e,t)=>{const{class:n,startAdornment:o,endAdornment:a,disabled:l,msg:r,touched:h,containerProps:u,startAdornmentProps:p,endAdornmentProps:m}=e,b=(0,s._)(e,["class","startAdornment","endAdornment","disabled","msg","touched","containerProps","startAdornmentProps","endAdornmentProps"]),f=(0,c.c)(r,h),y={"kol-input-container--disabled":l,[`kol-input-container--${(null==r?void 0:r.type)||"error"}`]:f},k=Object.assign({class:(0,d.c)("kol-input-container",y,n)},b);return g(o)||g(a)?(0,i.h)("div",Object.assign({},k),(0,i.h)(v,Object.assign({},p,{position:"start"}),o),(0,i.h)(_,Object.assign({},u),t),(0,i.h)(v,Object.assign({},m,{position:"end"}),a)):(0,i.h)("div",Object.assign({},k),(0,i.h)(_,Object.assign({},u),t))},f=e=>{const{label:t,icons:n,hideLabel:o,disabled:a,onClick:r}=e,d=(0,s._)(e,["label","icons","hideLabel","disabled","onClick"]);return(0,i.h)(l.a,Object.assign({tabindex:0,_label:t,_disabled:a,_icons:n,_hideLabel:o,_on:{onClick:r}},d))},y=e=>{const{componentName:t="button",label:n,icon:o,onClick:a}=e,l=(0,s._)(e,["componentName","label","icon","onClick"]),d="button"===t?f:r.K;return(0,i.h)(d,Object.assign({label:n||"",hideLabel:!0,icons:`codicon codicon-${o}`,onClick:a},l))},k=({state:e,endAdornment:t},n)=>{const{icons:s,smartButton:l,disabled:r,msg:d,touched:h}=function(e){let t,n;return"_icons"in e&&(t=e._icons),"_smartButton"in e&&(n=e._smartButton),{icons:t,smartButton:n,disabled:e._disabled,msg:(0,c.a)(e._msg),touched:e._touched}}(e);let u=null==s?void 0:s.left;(0,o.i)(u)&&(u={icon:u});let p=null==s?void 0:s.right;(0,o.i)(p)&&(p={icon:p});const m=[],v=[];return t&&(Array.isArray(t)?v.push(...t):v.push(t)),u&&m.push((0,i.h)(y,Object.assign({componentName:"icon"},(0,a.i)(u)?u:{}))),(0,a.i)(l)&&v.push((0,i.h)(y,Object.assign({componentName:"button"},l,{hideLabel:!0,disabled:r}))),p&&v.push((0,i.h)(y,Object.assign({componentName:"icon"},(0,a.i)(p)?p:{}))),(0,i.h)(b,{disabled:r,msg:d,touched:h,startAdornment:m,endAdornment:v},n)},w=(e,t)=>{const n=e;"object"==typeof n&&null!==n&&((0,m.i)(n.right,1)&&(n.right={icon:n.right}),(0,m.i)(n.left,1)&&(n.left={icon:n.left}),t.set("_icons",n))};class S extends h.I{constructor(e,t,n){super(e,t,n),this.component=e}validateIcons(e){(0,p.o)(e,(()=>{try{e=(0,p.p)(e)}catch(e){}(0,p.w)(this.component,"_icons",(e=>"object"==typeof e&&null!==e&&((0,m.i)(e.left,1)||(0,u.i)(e.left)||(0,m.i)(e.right,1)||(0,u.i)(e.right))),new Set(["KoliBriHorizontalIcon"]),e,{hooks:{beforePatch:w},required:!0})}))}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons)}}},8973:(e,t,n)=>{n.d(t,{i:()=>s,v:()=>l});var i=n(5800),o=n(608);const a=(e,t,n)=>{(0,o.b)(n)?e[t]=n:(0,o.i)(n,1)&&(e[t]={icon:n})},s=e=>"object"==typeof e&&null!==e&&(void 0===e.style||(0,o.a)(e.style))&&(void 0===e.label||(0,o.i)(e.label))&&(0,o.i)(e.icon,1),l=(e,t,n={})=>{(0,i.o)(t,(()=>{var l;try{t=(0,i.p)(t)}catch(e){}(0,i.w)(e,"_icons",(e=>{const t="object"==typeof e&&null!==e&&0===Object.keys(e).length;return null===e||t||(0,o.i)(e,1)||"object"==typeof e&&null!==e&&((0,o.i)(e.left,1)||s(e.left)||(0,o.i)(e.right,1)||s(e.right)||(0,o.i)(e.top,1)||s(e.top)||(0,o.i)(e.bottom,1)||s(e.bottom))}),new Set(["KoliBriIcon"]),t,Object.assign(Object.assign({},n),{defaultValue:{},hooks:{afterPatch:null===(l=n.hooks)||void 0===l?void 0:l.afterPatch,beforePatch:(e,t,i,s)=>{var l,r;"function"==typeof(null===(l=n.hooks)||void 0===l?void 0:l.beforePatch)&&(null===(r=n.hooks)||void 0===r||r.beforePatch(e,t,i,s)),(e=>{var t,n,i;if(null===(t=e.nextState)||void 0===t?void 0:t.has("_icons")){const t=null===(n=e.nextState)||void 0===n?void 0:n.get("_icons");null===(i=e.nextState)||void 0===i||i.set("_icons",(e=>{let t={};return(0,o.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))}})(i)}}}))}))}},665:(e,t,n)=>{function i(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}n.d(t,{i:()=>i})},1219:(e,t,n)=>{n.r(t),n.d(t,{kol_input_date:()=>v});var i=n(1290),o=n(9060),a=n(526),s=n(359),l=n(7617),r=n(5800),d=n(623),c=n(4746),h=n(1416),u=(e,t,n)=>new Promise(((i,o)=>{var a=e=>{try{l(n.next(e))}catch(e){o(e)}},s=e=>{try{l(n.throw(e))}catch(e){o(e)}},l=e=>e.done?i(e.value):Promise.resolve(e.value).then(a,s);l((n=n.apply(e,t)).next())}));const p=["date","datetime-local","month","time","week"];class m extends l.I{constructor(e,t,n){super(e,t,n),this.validateIso8601=(e,t,n)=>(0,r.w)(this.component,e,(e=>void 0===e||null==e||""===e||this.validateDateString(e)),new Set(["Date","string{ISO-8601}"]),m.tryParseToString(t,this.component._type,this.component._step),{hooks:{afterPatch:e=>{"string"==typeof e&&n&&n(e)}}}),this.component=e}validateAutoComplete(e){(0,r.w)(this.component,"_autoComplete",(e=>"string"==typeof e&&("on"===e||"off"===e)),new Set(["on | off"]),e)}validateSuggestions(e){(0,d.v)(this.component,e)}static tryParseToString(e,t,n){if("string"==typeof e||null===e)return e;if("object"==typeof e&&e instanceof Date){const i=e.getFullYear(),o=String(e.getMonth()+1).padStart(2,"0"),a=String(e.getDate()).padStart(2,"0"),s=String(e.getHours()).padStart(2,"0"),l=String(e.getMinutes()).padStart(2,"0"),r=String(e.getSeconds()).padStart(2,"0"),d=[i,o,a].join("-"),c=[s,l,r].join(":");switch(t){case"date":return d;case"datetime-local":return`${d}T${c}`;case"month":return`${i}-${o}`;case"time":return void 0===n||"60"===String(n)?`${s}:${l}`:c;case"week":return`${i}-W${this.getWeekNumberOfDate(e)}`}}}static getWeekNumberOfDate(e){const t=new Date(e),n=(t.getDay()+6)%7;t.setDate(t.getDate()-n+3);const i=t.valueOf();return t.setMonth(0,1),4!==t.getDay()&&t.setMonth(0,1+(4-t.getDay()+7)%7),(1+Math.ceil((i-t.valueOf())/6048e5)).toString().padStart(2,"0")}validateDateString(e){switch(this.component._type){case"date":return m.isoDateRegex.test(e);case"datetime-local":return m.isoLocalDateTimeRegex.test(e);case"month":return m.isoMonthRegex.test(e);case"time":return m.isoTimeRegex.test(e);case"week":return m.isoWeekRegex.test(e);default:return!1}}onBlur(e){super.onBlur(e),!!e.target.value!=!!this.component._value&&(this.component._value=e.target.value)}validateMax(e){const t=null!=e||"date"!==this.component._type&&"month"!==this.component._type&&"datetime-local"!==this.component._type?e:m.DEFAULT_MAX_DATE;this.validateIso8601("_max",t)}validateMin(e){this.validateIso8601("_min",e)}validateOn(e){(0,r.s)(this.component,"_on",Object.assign(Object.assign({},e),{onChange:(t,n)=>{!!n!=!!this.component._value&&(this.component._value=n),(null==e?void 0:e.onChange)&&e.onChange(t,n)}}))}validateReadOnly(e){((e,t)=>{(0,r.b)(e,"_readOnly",t)})(this.component,e)}validateRequired(e){(0,r.b)(this.component,"_required",e)}validateStep(e){(0,r.k)(this.component,"_step",e)}validateType(e){(0,r.w)(this.component,"_type",(e=>"string"==typeof e&&p.includes(e)),new Set([`String {${p.join(", ")}`]),e)}validateValue(e){this.validateValueEx(e)}validateValueEx(e,t){this.validateIso8601("_value",e,t),this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateMax(this.component._max),this.validateMin(this.component._min),this.validateLabel(this.component._label),this.validateSuggestions(this.component._suggestions),this.validateOn(this.component._on),this.validateReadOnly(this.component._readOnly),this.validateRequired(this.component._required),this.validateStep(this.component._step),this.validateType(this.component._type),this.validateValue(this.component._value)}}m.isoDateRegex=/^\d{4}-([0]\d|1[0-2])-([0-2]\d|3[01])/,m.isoLocalDateTimeRegex=/^\d{4}-([0]\d|1[0-2])-([0-2]\d|3[01])[T ][0-2]\d:[0-5]\d(:[0-5]\d(?:\.\d+)?)?/,m.isoMonthRegex=/^\d{4}-([0]\d|1[0-2])/,m.isoTimeRegex=/^[0-2]\d:[0-5]\d(:[0-5]\d(?:\.\d+)?)?/,m.isoWeekRegex=/^\d{4}-W(?:[0-4]\d|5[0-3])$/,m.DEFAULT_MAX_DATE=new Date(9999,11,31,23,59,59);const v=class{getValue(){return u(this,null,(function*(){var e;return this.inputRef&&this.remapValue(null===(e=this.inputRef)||void 0===e?void 0:e.value)}))}kolFocus(){return u(this,null,(function*(){var e;null===(e=this.inputRef)||void 0===e||e.focus()}))}reset(){return u(this,null,(function*(){this.state=Object.assign(Object.assign({},this.state),{_value:null}),this.controller.setFormAssociatedValue(""),this.inputRef&&(this.inputRef.value="")}))}setInitialValueType(e){e instanceof Date?this._initialValueType="Date":this._initialValueType="string"==typeof e?"String":null}remapValue(e){return"Date"===this._initialValueType?new Date(e):e}getFormFieldProps(){return{state:this.state,class:(0,o.c)("kol-input-date",this.state._type,{"has-value":this.state._hasValue}),tooltipAlign:this._tooltipAlign,onClick:()=>{var e;return null===(e=this.inputRef)||void 0===e?void 0:e.focus()},alert:this.showAsAlert()}}getInputProps(){return Object.assign(Object.assign({ref:this.catchRef,state:this.state},this.controller.onFacade),{onBlur:this.onBlur,onFocus:this.onFocus,onKeyDown:this.onKeyDown,onChange:this.onChange,onInput:this.onInput})}render(){return(0,i.h)(h.K,Object.assign({key:"9e77f6ab10578d1e1a0ca4acc3ac2bbcf6da83a8"},this.getFormFieldProps()),(0,i.h)(l.K,{key:"c1f41c979b0101f6dbd0e32956a5ccbcc002d973",state:this.state},(0,i.h)(c.K,Object.assign({key:"276a2bf5473d0547c33fa8f562a38f5b59ffeb92"},this.getInputProps()))))}constructor(e){(0,i.r)(this,e),this.catchRef=e=>{this.inputRef=e},this.onBlur=e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1},this.onFocus=e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},this.onChange=e=>{const t=e.target.value,n=this.remapValue(t);this.controller.onFacade.onChange(e,n)},this.onInput=e=>{const t=e.target.value,n=this.remapValue(t);this._value=n,this.controller.onFacade.onInput(e,!0,n)},this.onKeyDown=e=>{"Enter"!==e.code&&"NumpadEnter"!==e.code||(0,s.p)({form:this.host,ref:this.inputRef})},this._initialValueType=null,this._accessKey=void 0,this._autoComplete=void 0,this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._max=void 0,this._min=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._readOnly=!1,this._required=!1,this._shortKey=void 0,this._smartButton=void 0,this._suggestions=void 0,this._syncValueBySelector=void 0,this._step=void 0,this._tooltipAlign="top",this._touched=!1,this._type="date",this._value=void 0,this.state={_autoComplete:"off",_hasValue:!1,_hideMsg:!1,_id:`id-${(0,a.n)()}`,_label:"",_suggestions:[],_type:"datetime-local"},this.inputHasFocus=!1,this.controller=new m(this,"date",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAutoComplete(e){this.controller.validateAutoComplete(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMax(e){this.controller.validateMax(e)}validateMin(e){this.controller.validateMin(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateReadOnly(e){this.controller.validateReadOnly(e)}validateRequired(e){this.controller.validateRequired(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSmartButton(e){this.controller.validateSmartButton(e)}validateSuggestions(e){this.controller.validateSuggestions(e)}validateStep(e){this.controller.validateStep(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}validateType(e){this.controller.validateType(e)}validateValue(e){e instanceof Date&&(0,r.n)("Date type will be removed in v3. Use `Iso8601` instead."),this.controller.validateValueEx(e),void 0!==e&&this.setInitialValueType(e)}componentWillLoad(){void 0!==this._value&&this.setInitialValueType(this._value),this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((e=>this.state._hasValue=!!e))}static get delegatesFocus(){return!0}get host(){return(0,i.g)(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_max:["validateMax"],_min:["validateMin"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_shortKey:["validateShortKey"],_smartButton:["validateSmartButton"],_suggestions:["validateSuggestions"],_step:["validateStep"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"]}}};v.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 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  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: rem(16);\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    cursor: pointer;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    font-size: rem(16);\n    height: rem(44);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}"}},623:(e,t,n)=>{n.d(t,{v:()=>o});var i=n(5800);const o=(e,t)=>{(0,i.g)(e,"_suggestions",(e=>"string"==typeof e||"number"==typeof e),t,void 0,{hooks:{afterPatch:e=>{Array.isArray(e)&&e.length&&(0,i.a)("Property suggestions: Options have accessibility issues in how browsers implemented them and should not be used for now.")}}})}}}]);