@public-ui/sample-react 4.0.0-alpha.7 → 4.0.0-alpha.9

package/src/components/input-text/message-types.tsx

@@ -0,0 +1,19 @@
+import { KolInputText } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const InputTextMessageTypes: FC = () => (
+	<>
+		<SampleDescription>
+			<p>This story demonstrates all available message types for KolInputText: info, error, warning, and success.</p>
+		</SampleDescription>
+
+		<div className="grid gap-4">
+			<KolInputText _label="Info message" _value="Some value" _msg={{ _type: 'info', _description: 'This is an informational message' }} />
+			<KolInputText _label="Error message" _value="Invalid value" _msg={{ _type: 'error', _description: 'This is an error message' }} _touched />
+			<KolInputText _label="Warning message" _value="Potentially problematic value" _msg={{ _type: 'warning', _description: 'This is a warning message' }} />
+			<KolInputText _label="Success message" _value="Valid value" _msg={{ _type: 'success', _description: 'This is a success message' }} />
+		</div>
+	</>
+);

package/src/components/input-text/placeholder.tsx

@@ -0,0 +1,20 @@
+import { KolInputText } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const InputTextPlaceholder: FC = () => (
+	<>
+		<SampleDescription>
+			<p>This story demonstrates the placeholder feature of KolInputText.</p>
+		</SampleDescription>
+
+		<div className="grid gap-4">
+			<KolInputText _label="First name" _placeholder="Enter your first name" />
+			<KolInputText _label="Email address" _placeholder="user@example.com" />
+			<KolInputText _label="Phone number" _placeholder="+49 123 456789" _type="tel" />
+			<KolInputText _label="Website" _placeholder="https://example.com" _type="url" />
+			<KolInputText _label="Search" _placeholder="Search..." _type="search" />
+		</div>
+	</>
+);

package/src/components/input-text/readonly.tsx

@@ -0,0 +1,24 @@
+import { KolInputText } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const InputTextReadonly: FC = () => (
+	<>
+		<SampleDescription>
+			<p>This story demonstrates the readonly state of KolInputText. Readonly inputs can be focused but not edited.</p>
+		</SampleDescription>
+
+		<div className="grid gap-4">
+			<KolInputText _label="Readonly with placeholder" _placeholder="Placeholder text" _readOnly />
+			<KolInputText _label="Readonly with value" _value="This field is readonly" _readOnly />
+			<KolInputText
+				_label="Readonly with info message"
+				_value="Read-only value"
+				_msg={{ _type: 'info', _description: 'This field cannot be edited' }}
+				_readOnly
+			/>
+			<KolInputText _label="Comparison: Editable" _value="This field is editable" />
+		</div>
+	</>
+);

package/src/components/input-text/routes.ts

@@ -1,7 +1,14 @@
 import { Routes } from '../../shares/types';
+import { InputTextAccessShortKey } from './access-short-key';
+import { InputTextBackground } from './background-test';
 import { InputTextBasic } from './basic';
+import { InputTextDisabled } from './disabled';
 import { InputTextExpertSlot } from './expert-slot';
+import { InputTextHideLabel } from './hide-label';
 import { InputTextHideMsg } from './hide-msg';
+import { InputTextMessageTypes } from './message-types';
+import { InputTextPlaceholder } from './placeholder';
+import { InputTextReadonly } from './readonly';
 import { InputTextSelectRange } from './select-range';
 import { InputTextSmartButton } from './smart-button';
 import { InputTextFormatterDemo } from './text-formatter';
@@ -9,10 +16,17 @@ import { InputTextFormatterDemo } from './text-formatter';
 export const INPUT_TEXT_ROUTES: Routes = {
 	'input-text': {
 		basic: InputTextBasic,
+		'message-types': InputTextMessageTypes,
+		placeholder: InputTextPlaceholder,
+		disabled: InputTextDisabled,
+		readonly: InputTextReadonly,
+		'access-short-key': InputTextAccessShortKey,
+		'hide-label': InputTextHideLabel,
 		'hide-msg': InputTextHideMsg,
 		'text-formatter': InputTextFormatterDemo,
 		'smart-button': InputTextSmartButton,
 		'expert-slot': InputTextExpertSlot,
 		'select-range': InputTextSelectRange,
+		background: InputTextBackground,
 	},
 };

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

@@ -10,10 +10,10 @@ const smartButtonProps = {
 
 const icons = {
 	left: {
-		icon: 'codicon codicon-arrow-left',
+		icon: 'codicon codicon-search',
 	},
 	right: {
-		icon: 'codicon codicon-arrow-right',
+		icon: 'codicon codicon-check',
 	},
 };
 
@@ -48,13 +48,14 @@ export const InputTextSmartButton = () => {
 					_icons={icons}
 				></KolInputText>
 				<KolInputText
-					_label="Disabled input with button and without icons"
+					_label="Disabled input with button and icons"
 					_disabled
 					_type="text"
 					_smartButton={{
 						...smartButtonProps,
 						_label: 'Disabled Button',
 					}}
+					_icons={icons}
 				></KolInputText>
 			</div>
 		</>

package/src/components/link/basic.tsx

@@ -8,15 +8,16 @@ export const LinkBasic: FC = () => (
 	<>
 		<SampleDescription>
 			<p>
-				KolLink renders a link. This sample shows disabled links, links with hidden label and links with different CSS <code>display</code>-properties.
+				KolLink renders a link. This sample shows disabled links, links with hidden label, the boolean _inline property and links with different CSS{' '}
+				<code>display</code>-properties.
 			</p>
 		</SampleDescription>
 
 		<div className="grid gap-4">
-			<KolLink _href="#/back-page" _label="Simple Link" _variant="standalone" />
-			<KolLink _disabled _href="#/back-page" _label="Simple Link (disabled)" _variant="standalone" />
-			<KolLink _hideLabel _icons="codicon codicon-home" _href="#/back-page" _label="Icon Link" _variant="standalone" />
-			<KolLink _disabled _hideLabel _icons="codicon codicon-home" _href="#/back-page" _label="Icon Link (disabled)" _variant="standalone" />
+			<KolLink _href="#/back-page" _inline={false} _label="Simple Link" />
+			<KolLink _disabled _href="#/back-page" _inline={false} _label="Simple Link (disabled)" />
+			<KolLink _hideLabel _icons="codicon codicon-home" _href="#/back-page" _inline={false} _label="Icon Link" />
+			<KolLink _disabled _hideLabel _icons="codicon codicon-home" _href="#/back-page" _inline={false} _label="Icon Link (disabled)" />
 			<p>
 				In this paragraph, a link is inserted that contains no additional attributes. <KolLink _href="#/back-page" _label="Simple Link" /> It is rendered by
 				default as a <strong>inline element</strong>.

package/src/components/link/link-react-router.tsx

@@ -24,7 +24,7 @@ export const LinkReactRouter: FC = () => {
 			</SampleDescription>
 
 			<div className="grid gap-4">
-				<KolLink _href="/back-page" _label="Go to overview" _variant="standalone" _on={on} />
+				<KolLink _href="/back-page" _inline={false} _label="Go to overview" _on={on} />
 			</div>
 		</>
 	);

package/src/components/popover-button/inline.tsx

@@ -0,0 +1,36 @@
+import { KolHeading, KolPopoverButton } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const PopoverButtonInline: FC = () => {
+	return (
+		<>
+			<SampleDescription>
+				<p>
+					A PopoverButton inline with some dummy text. Here the PopoverButton has the height of the surrounding text. As statet in
+					<a href="https://www.w3.org/WAI/WCAG21/Understanding/target-size.html">Understanding SC 2.5.5</a> target size of a help icon in text can be smaller
+					than 44px by 44px.
+				</p>
+			</SampleDescription>
+			<div className="flex flex-col gap-4">
+				<p>
+					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur aut dolore dolores itaque praesentium reprehenderit sed voluptatum!
+					Exercitationem ipsa magni maiores modi, placeat quas quos reprehenderit rerum sit veniam vitae.
+					<KolPopoverButton _inline={true} _label="Help" _icons="codicon codicon-question" _popoverAlign="right" _tooltipAlign="bottom" _hideLabel>
+						<div className="w-sm p-2 border border-solid border-gray">
+							<KolHeading _label="Help Information" _level={0}></KolHeading>
+							<p>
+								<u>Lorem ipsum dolor sit amet</u>, consectetur adipisicing elit. Aspernatur aut dolore dolores itaque praesentium reprehenderit sed voluptatum!
+								Exercitationem ipsa magni maiores modi, placeat quas quos reprehenderit rerum sit veniam vitae.
+							</p>
+						</div>
+					</KolPopoverButton>
+					<br />
+					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur aut dolore dolores itaque praesentium reprehenderit sed voluptatum!
+					Exercitationem ipsa magni maiores modi, placeat quas quos reprehenderit rerum sit veniam vitae.
+				</p>
+			</div>
+		</>
+	);
+};

package/src/components/popover-button/routes.ts

@@ -1,8 +1,10 @@
 import { Routes } from '../../shares/types';
 import { PopoverButtonBasic } from './basic';
+import { PopoverButtonInline } from './inline';
 
 export const POPOVER_BUTTON_ROUTES: Routes = {
 	'popover-button': {
 		basic: PopoverButtonBasic,
+		inline: PopoverButtonInline,
 	},
 };

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

@@ -40,6 +40,93 @@ export const SingleSelectCases = (props: Components.KolSingleSelect) => {
 			<KolSingleSelect {...props} _label="With short key" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} _shortKey="s" />
 			<KolSingleSelect {...props} _label="With long labels" _options={LONG_OPTIONS as Option<StencilUnknown>[]} _placeholder="Placeholder" />
 			<KolSingleSelect {...props} _label="With hidden clear button" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} _hideClearButton />
+			<KolSingleSelect
+				{...props}
+				_hint={HINT_MSG}
+				_label="With disabled options"
+				_options={
+					[
+						{
+							value: 'bw',
+							label: 'Baden-Württemberg',
+						},
+						{
+							value: 'by',
+							label: 'Bayern',
+							disabled: true,
+						},
+						{
+							value: 'be',
+							label: 'Berlin',
+						},
+						{
+							value: 'bb',
+							label: 'Brandenburg',
+						},
+						{
+							value: 'hb',
+							label: 'Bremen',
+						},
+						{
+							value: 'hh',
+							label: 'Hamburg',
+						},
+						{
+							value: 'he',
+							label: 'Hessen',
+						},
+						{
+							value: 'mv',
+							label: 'Mecklenburg-Vorpommern',
+							disabled: true,
+						},
+						{
+							value: 'ni',
+							label: 'Niedersachsen',
+							disabled: true,
+						},
+						{
+							value: 'nw',
+							label: 'Nordrhein-Westfalen',
+						},
+						{
+							value: 'rp',
+							label: 'Rheinland-Pfalz',
+							disabled: true,
+						},
+						{
+							value: 'sl',
+							label: 'Saarland',
+						},
+						{
+							value: 'sn',
+							label: 'Sachsen',
+						},
+						{
+							value: 'st',
+							label: 'Sachsen-Anhalt',
+							disabled: true,
+						},
+						{
+							value: 'sh',
+							label: 'Schleswig-Holstein',
+							disabled: true,
+						},
+						{
+							value: 'th',
+							label: 'Thüringen',
+						},
+					] as Option<StencilUnknown>[]
+				}
+				_value={'be'}
+				_on={{
+					onBlur: console.log,
+					onInput: console.log,
+					onChange: console.log,
+					onClick: console.log,
+					onFocus: console.log,
+				}}
+			/>
 		</div>
 	);
 };

package/src/components/table/multi-sort.tsx

@@ -4,8 +4,6 @@ import React, { useState } from 'react';
 import type { KoliBriTableDataType, KoliBriTableHeaderCellWithLogic, KoliBriTableHeaders } from '@public-ui/components';
 import { KolButtonLink, KolHeading, KolTableStateful } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
-import type { Data } from './test-data';
-import { DATA } from './test-data';
 
 const DATE_FORMATTER = Intl.DateTimeFormat('de-DE', {
 	day: '2-digit',
@@ -13,26 +11,87 @@ const DATE_FORMATTER = Intl.DateTimeFormat('de-DE', {
 	year: 'numeric',
 });
 
+type BacklogEntry = {
+	date: Date;
+	assignee: string;
+	department: string;
+	priority: 'High' | 'Medium' | 'Low';
+	status: 'Blocked' | 'In progress' | 'Ready';
+	openTickets: number;
+};
+
+const ASSIGNEES = ['Devon Chen', 'Fatima Alvi', 'Leon Köhler', 'Mila Schmidt', 'Sven Lindholm'];
+const DEPARTMENTS = ['Customer Service', 'Digital Services', 'Infrastructure', 'Municipal Office'];
+const PRIORITY_SEQUENCE: BacklogEntry['priority'][] = ['High', 'Medium', 'Low'];
+const STATUS_SEQUENCE: BacklogEntry['status'][] = ['Blocked', 'In progress', 'Ready'];
+
+const PRIORITY_ORDER = PRIORITY_SEQUENCE.reduce<Record<BacklogEntry['priority'], number>>(
+	(order, priority, index) => {
+		order[priority] = index;
+		return order;
+	},
+	{} as Record<BacklogEntry['priority'], number>,
+);
+
+const STATUS_ORDER = STATUS_SEQUENCE.reduce<Record<BacklogEntry['status'], number>>(
+	(order, status, index) => {
+		order[status] = index;
+		return order;
+	},
+	{} as Record<BacklogEntry['status'], number>,
+);
+
+const BACKLOG_DATA: BacklogEntry[] = Array.from({ length: 15 }).map((_, index) => ({
+	date: new Date(Date.now() - index * 1000 * 60 * 60 * 24),
+	assignee: ASSIGNEES[index % ASSIGNEES.length],
+	department: DEPARTMENTS[index % DEPARTMENTS.length],
+	priority: PRIORITY_SEQUENCE[index % PRIORITY_SEQUENCE.length],
+	status: STATUS_SEQUENCE[index % STATUS_SEQUENCE.length],
+	openTickets: (index * 3) % 11,
+}));
 const TABLE_HEADER_CELLS: KoliBriTableHeaderCellWithLogic[] = [
 	{
-		label: 'order',
-		key: 'order',
-		textAlign: 'center',
-		compareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) => {
-			if ((data0 as Data).order < (data1 as Data).order) return -1;
-			else if ((data1 as Data).order < (data0 as Data).order) return 1;
-			else return 0;
-		},
+		label: 'Assignee',
+		key: 'assignee',
+		compareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) =>
+			(data0 as BacklogEntry).assignee.localeCompare((data1 as BacklogEntry).assignee, 'de'),
 		sortDirection: 'ASC',
 	},
 	{
-		label: 'date',
+		label: 'Department',
+		key: 'department',
+		compareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) =>
+			(data0 as BacklogEntry).department.localeCompare((data1 as BacklogEntry).department, 'de'),
+	},
+	{
+		label: 'Priority',
+		key: 'priority',
+		textAlign: 'center',
+		compareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) =>
+			PRIORITY_ORDER[(data0 as BacklogEntry).priority] - PRIORITY_ORDER[(data1 as BacklogEntry).priority],
+		sortDirection: 'DESC',
+	},
+	{
+		label: 'Status',
+		key: 'status',
+		textAlign: 'center',
+		compareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) =>
+			STATUS_ORDER[(data0 as BacklogEntry).status] - STATUS_ORDER[(data1 as BacklogEntry).status],
+	},
+	{
+		label: 'Open tickets',
+		key: 'openTickets',
+		textAlign: 'right',
+		compareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) => (data0 as BacklogEntry).openTickets - (data1 as BacklogEntry).openTickets,
+	},
+	{
+		label: 'Last updated',
 		key: 'date',
 		textAlign: 'center',
-		render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),
+		render: (_el, _cell, tuple) => DATE_FORMATTER.format((tuple as BacklogEntry).date),
 		compareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) => {
-			if ((data0 as Data).date < (data1 as Data).date) return -1;
-			else if ((data1 as Data).date < (data0 as Data).date) return 1;
+			if ((data0 as BacklogEntry).date < (data1 as BacklogEntry).date) return -1;
+			else if ((data1 as BacklogEntry).date < (data0 as BacklogEntry).date) return 1;
 			else return 0;
 		},
 	},
@@ -52,17 +111,20 @@ export const MultiSortTable: FC = () => {
 	return (
 		<>
 			<SampleDescription>
-				<p>This sample shows KolTableStateful with multi-sort functionality, allowing sorting by both &quot;order&quot; and &quot;date&quot; columns.</p>
+				<p>
+					Multi-sort allows layering multiple column sorts at once. Compare the compact examples with the project backlog showcase to see how the sort order
+					indicator helps track complex prioritisation.
+				</p>
 			</SampleDescription>
 
-			<section className="w-full grid gap-4">
+			<section className="w-full grid gap-6">
 				<section className="grid gap-4">
 					<KolHeading _level={2} _label="Vertical" />
 					<KolButtonLink _label="Reset Table" _on={{ onClick: () => setVerticalHeader({ vertical: [[...TABLE_HEADER_CELLS]] }) }}></KolButtonLink>
 					<KolTableStateful
 						_label="Sort Table with Order and Date"
 						_minWidth="auto"
-						_data={DATA.slice(0, 10)}
+						_data={BACKLOG_DATA.slice(0, 10)}
 						_headers={verticallHeader}
 						className="block"
 						_allowMultiSort={true}
@@ -74,7 +136,7 @@ export const MultiSortTable: FC = () => {
 					<KolTableStateful
 						_label="Sort Table with Order and Date"
 						_minWidth="auto"
-						_data={DATA}
+						_data={BACKLOG_DATA}
 						_headers={horizontalHeader}
 						className="block"
 						_allowMultiSort={true}

package/vite.config.ts

@@ -30,7 +30,7 @@ export default defineConfig({
 		sourcemap: true,
 	},
 	server: {
-		port: 9191,
+		port: parseInt(process.env.KOLIBRI_VISUAL_TEST_PORT || '9191', 10),
 		fs: {
 			allow: [
 				path.resolve(__dirname),

package/dist/assets/CustomSuggestionsOptionsGroup-F-K5k1eH-GAXLZNMg.js

@@ -1,2 +0,0 @@
-import{h as r}from"./index-z-9Q5FY7.js";import{c as f}from"./clsx-eK3rPvPS-B-dksMZM.js";const C=({index:o,ref:t,selected:n,onClick:e,onMouseOver:l,onFocus:c,onKeyDown:p,option:a,searchTerm:m})=>{const d=(u,s)=>{if(!s?.trim())return u;const g=new RegExp(`(${s.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")})`,"gi");return u.split(g).map((i,k)=>g.test(i)?r("mark",{key:k},i):i)};return r("li",{id:`option-${o}`,key:`-${o}`,ref:t,"data-index":o,tabIndex:-1,role:"option","aria-selected":n?"true":void 0,onClick:e,onMouseOver:l,onFocus:c,class:"kol-custom-suggestions-option",onKeyDown:p},d(String(a),m||""))},S=({blockSuggestionMouseOver:o,onKeyDown:t,style:n},e)=>r("ul",{role:"listbox",style:n,class:f("kol-custom-suggestions-options-group",{"kol-custom-suggestions-options-group--cursor-hidden":o}),onKeyDown:t},e);export{S as C,C as a};
-//# sourceMappingURL=CustomSuggestionsOptionsGroup-F-K5k1eH-GAXLZNMg.js.map

package/dist/assets/CustomSuggestionsOptionsGroup-F-K5k1eH-GAXLZNMg.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CustomSuggestionsOptionsGroup-F-K5k1eH-GAXLZNMg.js","sources":["../../../../components/dist/esm/CustomSuggestionsOptionsGroup-F-K5k1eH.js"],"sourcesContent":["/*!\n * KoliBri - The accessible HTML-Standard\n */\nimport { h } from './index-BtD7uFmA.js';\nimport { c as clsx } from './clsx-eK3rPvPS.js';\n\nconst CustomSuggestionsOptionFc = ({ index, ref, selected, onClick, onMouseOver, onFocus, onKeyDown, option, searchTerm }) => {\n    const highlightSearchTerm = (text, searchTerm) => {\n        if (!(searchTerm === null || searchTerm === void 0 ? void 0 : searchTerm.trim()))\n            return text;\n        const regex = new RegExp(`(${searchTerm.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&')})`, 'gi');\n        const parts = text.split(regex);\n        return parts.map((part, partIndex) => (regex.test(part) ? h(\"mark\", { key: partIndex }, part) : part));\n    };\n    return (h(\"li\", { id: `option-${index}`, key: `-${index}`, ref: ref, \"data-index\": index, tabIndex: -1, role: \"option\", \"aria-selected\": selected ? 'true' : undefined, onClick: onClick, onMouseOver: onMouseOver, onFocus: onFocus, class: \"kol-custom-suggestions-option\", onKeyDown: onKeyDown }, highlightSearchTerm(String(option), searchTerm || '')));\n};\n\nconst CustomSuggestionsOptionsGroupFc = ({ blockSuggestionMouseOver, onKeyDown, style }, children) => {\n    return (h(\"ul\", { role: \"listbox\", style: style, class: clsx('kol-custom-suggestions-options-group', {\n            'kol-custom-suggestions-options-group--cursor-hidden': blockSuggestionMouseOver,\n        }), onKeyDown: onKeyDown }, children));\n};\n\nexport { CustomSuggestionsOptionsGroupFc as C, CustomSuggestionsOptionFc as a };\n//# sourceMappingURL=CustomSuggestionsOptionsGroup-F-K5k1eH.js.map\n\n//# sourceMappingURL=CustomSuggestionsOptionsGroup-F-K5k1eH.js.map"],"names":["CustomSuggestionsOptionFc","index","ref","selected","onClick","onMouseOver","onFocus","onKeyDown","option","searchTerm","highlightSearchTerm","text","regex","part","partIndex","h","CustomSuggestionsOptionsGroupFc","blockSuggestionMouseOver","style","children","clsx"],"mappings":"wFAMK,MAACA,EAA4B,CAAC,CAAE,MAAAC,EAAO,IAAAC,EAAK,SAAAC,EAAU,QAAAC,EAAS,YAAAC,EAAa,QAAAC,EAAS,UAAAC,EAAW,OAAAC,EAAQ,WAAAC,CAAU,IAAO,CAC1H,MAAMC,EAAsB,CAACC,EAAMF,IAAe,CAC9C,GAAI,CAA0DA,GAAW,OACrE,OAAOE,EACX,MAAMC,EAAQ,IAAI,OAAO,IAAIH,EAAW,QAAQ,sBAAuB,MAAM,CAAC,IAAK,IAAI,EAEvF,OADcE,EAAK,MAAMC,CAAK,EACjB,IAAI,CAACC,EAAMC,IAAeF,EAAM,KAAKC,CAAI,EAAIE,EAAE,OAAQ,CAAE,IAAKD,CAAS,EAAID,CAAI,EAAIA,CAAK,CACzG,EACA,OAAQE,EAAE,KAAM,CAAE,GAAI,UAAUd,CAAK,GAAI,IAAK,IAAIA,CAAK,GAAI,IAAKC,EAAK,aAAcD,EAAO,SAAU,GAAI,KAAM,SAAU,gBAAiBE,EAAW,OAAS,OAAW,QAASC,EAAS,YAAaC,EAAa,QAASC,EAAS,MAAO,gCAAiC,UAAWC,CAAS,EAAIG,EAAoB,OAAOF,CAAM,EAAGC,GAAc,EAAE,CAAC,CAC/V,EAEMO,EAAkC,CAAC,CAAE,yBAAAC,EAA0B,UAAAV,EAAW,MAAAW,CAAK,EAAIC,IAC7EJ,EAAE,KAAM,CAAE,KAAM,UAAW,MAAOG,EAAO,MAAOE,EAAK,uCAAwC,CAC7F,sDAAuDH,CACnE,CAAS,EAAG,UAAWV,CAAS,EAAIY,CAAQ"}

package/dist/assets/FormFieldStateWrapper-DdxBfHk9-Z8hHMcic.js

@@ -1,2 +0,0 @@
-import{h as s,F as V,K as re,n as z,v as se,s as j,o as U,p as w,d as ae,a as T,m as A,w as le,Y as de,t as ce,A as D}from"./index-z-9Q5FY7.js";import{v as he,a as E,b as ue,c as me}from"./access-and-short-key-B37XLwy2-C-tLXrJQ.js";import{v as pe}from"./disabled-BhpAFgSp-DpNF6m-0.js";import{v as fe}from"./hide-label-B9FhGrWP-C9po7_Qn.js";import{a as ge}from"./label-Dnmzb2S_-_pvd9A5V.js";import{v as be}from"./tooltip-align-Cnin7S26-DQNRYQGf.js";import{A as _e}from"./associated.controller-CKSywYuL-D_-NPKll.js";import{i as H,a as ye,c as ve,r as xe}from"./isObject-DvSELytj-DhzEQer1.js";import{_ as C}from"./tslib.es6-CxX45GIN-BGVaTf34.js";import{c as g}from"./clsx-eK3rPvPS-B-dksMZM.js";import{b as G,s as Le}from"./reuse-CX4AQDkS-BaVSFETn.js";import{t as p}from"./i18n-BzQ08vD6-CNBTxQ3d.js";import{i as W,K as Fe}from"./InternalUnderlinedBadgeText-Bs9VOx3f-Cx46a1Fh.js";import{K as Ke}from"./Alert-83Gb4NJi-B1Ay2PFS.js";const Te=(e,t)=>{A(e,"_adjustHeight",t)},Ce=(e,t,n)=>{A(e,"_hideMsg",t,n)},ke=(e,t)=>{z(e,"_hint",t)},Se=(e,t)=>{U(t,()=>{try{t=w(t)}catch{}le(e,"_msg",n=>{if(n===void 0||typeof n=="string"&&n.length>0)return!0;if(de(n)&&n!==null){const i=n._description;return ce(i,1)}return!1},new Set(["MsgPropType","string"]),t)})};function Oe(e,t){var n;if(!e)return!1;const i=typeof e=="string"?"error":(n=e._type)!==null&&n!==void 0?n:"error";return t===!0||i!=="error"}function Me(e){if(typeof e=="string")try{return w(e)}catch{return{_description:e,_type:"error"}}return e&&typeof e=="object"&&!("_type"in e)?Object.assign(Object.assign({},e),{_type:"error"}):e}const Ie=(e,t)=>{A(e,"_touched",t)},je=({id:e,maxLength:t})=>s("span",{id:`${e}-character-limit-hint`,class:"visually-hidden"},p("kol-character-limit-hint",{placeholders:{limit:String(t)}})),Ee=({currentLength:e,currentLengthDebounced:t,maxLength:n,maxLengthBehavior:i})=>{let o,d;const c=["kol-form-field__counter"];if(i==="hard")o=typeof n=="number"?p("kol-character-counter-current-of-max",{placeholders:{current:String(e),max:String(n)}}):p("kol-character-counter-current",{placeholders:{current:String(e)}}),d=typeof n=="number"?p("kol-character-counter-current-of-max-aria",{placeholders:{current:String(t),max:String(n)}}):p("kol-character-counter-current",{placeholders:{current:String(t)}});else if(typeof n=="number"){const a=n-e,r=a<0,h=n-t,b=h<0;o=r?p("kol-character-limit-exceeded",{placeholders:{over:String(Math.abs(a))}}):p("kol-character-limit-remaining",{placeholders:{remaining:String(a)}}),d=b?p("kol-character-limit-exceeded",{placeholders:{over:String(Math.abs(h))}}):p("kol-character-limit-remaining",{placeholders:{remaining:String(h)}}),r&&c.push("kol-form-field__counter--exceeded")}else return null;return s(V,null,s("span",{class:g(c),"aria-hidden":"true","data-testid":"input-counter"},o),s("span",{"aria-live":"polite",class:"visually-hidden","data-testid":"input-counter-aria"},d))},Be=e=>{var{id:t,class:n,hint:i,baseClassName:o="kol-form-field"}=e,d=C(e,["id","class","hint","baseClassName"]);return i?s("span",Object.assign({class:g(`${o}__hint`,n),id:`${t}-hint`},d),i):null};var He="[object Symbol]";function we(e){return typeof e=="symbol"||ye(e)&&ve(e)==He}var Ae=/\s/;function Ne(e){for(var t=e.length;t--&&Ae.test(e.charAt(t)););return t}var Pe=/^\s+/;function $e(e){return e&&e.slice(0,Ne(e)+1).replace(Pe,"")}var q=NaN,De=/^[-+]0x[0-9a-f]+$/i,We=/^0b[01]+$/i,qe=/^0o[0-7]+$/i,Re=parseInt;function R(e){if(typeof e=="number")return e;if(we(e))return q;if(H(e)){var t=typeof e.valueOf=="function"?e.valueOf():e;e=H(t)?t+"":t}if(typeof e!="string")return e===0?e:+e;e=$e(e);var n=We.test(e);return n||qe.test(e)?Re(e.slice(2),n?2:8):De.test(e)?q:+e}var B=function(){return xe.Date.now()},Ve="Expected a function",ze=Math.max,Ue=Math.min;function Ge(e,t,n){var i,o,d,c,a,r,h=0,b=!1,f=!1,y=!0;if(typeof e!="function")throw new TypeError(Ve);t=R(t)||0,H(n)&&(b=!!n.leading,f="maxWait"in n,d=f?ze(R(n.maxWait)||0,t):d,y="trailing"in n?!!n.trailing:y);function u(l){var m=i,_=o;return i=o=void 0,h=l,c=e.apply(_,m),c}function v(l){return h=l,a=setTimeout(F,t),b?u(l):c}function x(l){var m=l-r,_=l-h,O=t-m;return f?Ue(O,d-_):O}function L(l){var m=l-r,_=l-h;return r===void 0||m>=t||m<0||f&&_>=d}function F(){var l=B();if(L(l))return k(l);a=setTimeout(F,x(l))}function k(l){return a=void 0,y&&i?u(l):(i=o=void 0,c)}function S(){a!==void 0&&clearTimeout(a),h=0,i=r=o=a=void 0}function M(){return a===void 0?c:k(B())}function K(){var l=B(),m=L(l);if(i=arguments,o=this,r=l,m){if(a===void 0)return v(r);if(f)return clearTimeout(a),a=setTimeout(F,t),u(r)}return a===void 0&&(a=setTimeout(F,t)),c}return K.cancel=S,K.flush=M,K}const Je=({hasExpertSlot:e,accessKey:t,shortKey:n,label:i,showBadge:o=!0})=>{if(e)return s("slot",{name:"expert"});if(!i)return null;const d=W(t)||W(n);if(!o||!d)return s("span",null,i);const c=G(t,n);return s(V,null,s(Fe,{badgeText:c,label:i})," ",s("kbd",{class:"badge-text-hint","aria-hidden":"true"},c))},Xe=e=>{var{component:t="label",id:n,baseClassName:i="kol-form-field",class:o,accessKey:d,shortKey:c,label:a,hideLabel:r,hasExpertSlot:h,showBadge:b,readOnly:f}=e,y=C(e,["component","id","baseClassName","class","accessKey","shortKey","label","hideLabel","hasExpertSlot","showBadge","readOnly"]);const u=!h&&r,v=p("kol-readonly");return s(t,Object.assign({},y,{class:g(`${i}__label`,o),id:u?void 0:`${n}-label`,hidden:u,htmlFor:n}),s("span",{class:g(`${i}__label-text`)},s(Je,{hasExpertSlot:h,accessKey:d,shortKey:c,label:a,showBadge:b}),f?s("span",{class:g(`${i}__label__read-only`),"aria-hidden":"true"},"(",v,")"):null))},Ye=e=>{var t,n,{alert:i,msg:o,id:d,class:c}=e,a=C(e,["alert","msg","id","class"]);const r=Me(o);return s(Ke,Object.assign({id:`${d}-msg`,alert:(t=r?._alert)!==null&&t!==void 0?t:i,hasCloser:!1,level:0,type:(n=r?._type)!==null&&n!==void 0?n:"error",variant:"msg",class:g("kol-form-field__msg",c)},a),r?._description||void 0)},Qe=({id:e,align:t,badgeText:n,label:i,class:o})=>s(re,{"aria-hidden":"true",class:g("kol-form-field__tooltip",o),_badgeText:n,_align:t,_id:`${e}-label`,_label:i});function Ze(e){return e?.type&&{default:"msg-type-default",info:"msg-type-info",success:"msg-type-success",warning:"msg-type-warning",error:"msg-type-error"}[e?.type]||""}const et=(e,t)=>{var{class:n}=e,i=C(e,["class"]);return s("div",Object.assign({class:g("kol-form-field__input",n)},i),t)},tt=(e,t)=>{var n;const{component:i="div",renderNoLabel:o,renderNoTooltip:d,renderNoHint:c,anotherChildren:a,id:r,required:h,alert:b,disabled:f,class:y,msg:u,hideMsg:v,hideLabel:x,label:L,hint:F,accessKey:k,shortKey:S,tooltipAlign:M,counter:K,readOnly:l,touched:m,maxLength:_,formFieldLabelProps:O,formFieldHintProps:J,formFieldTooltipProps:X,formFieldMsgProps:Y,formFieldInputProps:Q}=e,Z=C(e,["component","renderNoLabel","renderNoTooltip","renderNoHint","anotherChildren","id","required","alert","disabled","class","msg","hideMsg","hideLabel","label","hint","accessKey","shortKey","tooltipAlign","counter","readOnly","touched","maxLength","formFieldLabelProps","formFieldHintProps","formFieldTooltipProps","formFieldMsgProps","formFieldInputProps"]),ee=!o,te=!c,ne=!d,N=Le(L),P=Oe(u,m),ie=G(k,S),oe=ne&&!N&&x,$=typeof u=="string"?"error":(n=u?._type)!==null&&n!==void 0?n:"error";let I={"kol-form-field--disabled":!!f,"kol-form-field--required":!!h,"kol-form-field--touched":!!m,"kol-form-field--hide-label":!!x,"kol-form-field--read-only":!!l,"kol-form-field--hidden-msg":!!v};return P&&(I=Object.assign(Object.assign({},I),{[`kol-form-field--${$||"error"}`]:!0,[`kol-form-field--${Ze({type:$})}`]:!0})),s(i,Object.assign({class:g("kol-form-field",I,y)},Z),ee&&s(Xe,Object.assign({},O||{},{id:r,hasExpertSlot:N,hideLabel:x,label:L,accessKey:k,shortKey:S,readOnly:l})),s(et,Object.assign({},Q),t,oe&&x===!0&&s(Qe,Object.assign({},X||{},{id:r,label:L,align:M,badgeText:ie}))),K?s(Ee,Object.assign({},K)):null,_?s(je,{id:r,maxLength:_}):null,P&&!v&&s(Ye,Object.assign({},Y||{},{id:r,alert:b,msg:u})),te&&s(Be,Object.assign({},J||{},{id:r,hint:F})),a)};function _t({ariaDescribedBy:e,hideLabel:t,label:n}){return{title:"",autoCapitalize:"off",autoCorrect:"off","aria-describedby":e?.length?e.join(" "):void 0,"aria-label":t&&n?n:void 0}}class nt extends _e{constructor(t,n,i){super(t,n,i),this.component=t}validateTouched(t){Ie(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateTouched(this.component._touched)}}class yt extends nt{constructor(t,n,i){super(t,n,i),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),onKeyDown:this.onKeyDown.bind(this)},this.updateCurrentLengthDebounced=Ge(o=>{j(this.component,"_currentLengthDebounced",o)},500),this.component=t}validateAccessKey(t){he(this.component,t),E(t,this.component._shortKey)}validateAdjustHeight(t){Te(this.component,t)}validateDisabled(t){pe(this.component,t)}validateTooltipAlign(t){be(this.component,t)}validateHideMsg(t){Ce(this.component,t,{hooks:{afterPatch:()=>{this.component.state._hideMsg&&D("Property _hideMsg for inputs: Only use when the error message is shown outside of the input component.")}}})}validateHideLabel(t){fe(this.component,t,{hooks:{afterPatch:()=>{this.component.state._hideLabel&&D("Property hide-label for inputs: Only use for exceptions like search inputs that are clearly identifiable by their context.")}}})}validateHint(t){ke(this.component,t)}validateId(t){z(this.component,"_id",t,{minLength:1}),(t===""||typeof t>"u")&&se("A unique ID on the input fields is not strictly required, but it might be relevant for E2E tests.")}validateLabel(t){ge(this.component,t,{required:!0})}validateMsg(t){Se(this.component,t)}validateOn(t){typeof t=="object"&&j(this.component,"_on",t)}validateShortKey(t){ue(this.component,t),E(this.component._accessKey,t)}validateSmartButton(t){U(t,()=>{try{t=w(t)}catch{}j(this.component,"_smartButton",t)})}validateTabIndex(t){me(this.component,t)}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),E(this.component._accessKey,this.component._shortKey)}emitEvent(t,n){this.host&&ae(this.host,t,n)}onBlur(t){var n;this.component._touched=!0,this.emitEvent(T.blur),typeof((n=this.component._on)===null||n===void 0?void 0:n.onBlur)=="function"&&this.component._on.onBlur(t)}onChange(t,n){var i;typeof n>"u"&&(n=t.target.value),this.emitEvent(T.change,n),typeof((i=this.component._on)===null||i===void 0?void 0:i.onChange)=="function"&&this.component._on.onChange(t,n),this.valueChangeListeners.forEach(o=>o(n))}onInput(t,n=!0,i){var o;typeof i>"u"&&(i=t.target.value),this.emitEvent(T.input,i),n&&this.setFormAssociatedValue(i),typeof((o=this.component._on)===null||o===void 0?void 0:o.onInput)=="function"&&this.component._on.onInput(t,i)}onClick(t){var n;this.emitEvent(T.click),typeof((n=this.component._on)===null||n===void 0?void 0:n.onClick)=="function"&&this.component._on.onClick(t)}onFocus(t){var n;this.emitEvent(T.focus),typeof((n=this.component._on)===null||n===void 0?void 0:n.onFocus)=="function"&&this.component._on.onFocus(t)}onKeyDown(t){var n;this.emitEvent(T.keydown),typeof((n=this.component._on)===null||n===void 0?void 0:n.onKeyDown)=="function"&&this.component._on.onKeyDown(t)}addValueChangeListener(t){this.valueChangeListeners.push(t)}hasSoftCharacterLimit(){return typeof this.component.state._maxLength=="number"&&this.component.state._maxLengthBehavior==="soft"}hasCounter(){return this.component.state._hasCounter===!0}}const vt=e=>{var t;const n=e._msg,i=typeof n=="string"?n:n?._description,o=typeof n=="string"?"error":(t=n?._type)!==null&&t!==void 0?t:"error",d=!!(i&&i.length>0),a=o==="error"&&d&&e._touched===!0,r=typeof e._hint=="string"&&e._hint.length>0,h=[];return d&&!e._hideMsg&&h.push(`${e._id}-msg`),r&&h.push(`${e._id}-hint`),{hasError:a,hasHint:r,ariaDescribedBy:h}};function it(e){const t={id:e._id,disabled:e._disabled,msg:e._msg,hint:e._hint,label:e._label,hideLabel:e._hideLabel,hideMsg:e._hideMsg,touched:e._touched};return"_required"in e&&(t.required=e._required),"_readOnly"in e&&(t.readOnly=e._readOnly),"_accessKey"in e&&(t.accessKey=e._accessKey),"_shortKey"in e&&(t.shortKey=e._shortKey),"_maxLength"in e&&(t.maxLength=e._maxLength),"_currentLength"in e&&typeof e._currentLength=="number"&&"_currentLengthDebounced"in e&&typeof e._currentLengthDebounced=="number"&&"_hasCounter"in e&&e._hasCounter===!0&&(t.counter={currentLength:e._currentLength,currentLengthDebounced:e._currentLengthDebounced,maxLength:e._maxLength,maxLengthBehavior:e._maxLengthBehavior||"hard"}),t}const xt=(e,t)=>{var{state:n}=e,i=C(e,["state"]);return s(tt,Object.assign({},it(n),i),t)};export{xt as F,yt as I,Xe as K,Qe as a,Be as b,Oe as c,_t as d,vt as g};
-//# sourceMappingURL=FormFieldStateWrapper-DdxBfHk9-Z8hHMcic.js.map