@public-ui/sample-react 4.0.1 → 4.0.2-rc.0

package/src/components/table/action-columns-performance.tsx

@@ -0,0 +1,190 @@
+import type { KoliBriTableDataType, KoliBriTableHeaderCellWithLogic } from '@public-ui/components';
+import { KolTableStateful } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+const ROWS_COUNT = 50;
+
+type DataRow = {
+	id: number;
+	name: string;
+	email: string;
+	status: string;
+};
+
+const FIRST_NAMES = [
+	'Max',
+	'Erika',
+	'John',
+	'Jane',
+	'Peter',
+	'Anna',
+	'Michael',
+	'Sarah',
+	'Thomas',
+	'Lisa',
+	'Daniel',
+	'Maria',
+	'Christian',
+	'Laura',
+	'Stefan',
+	'Julia',
+	'Andreas',
+	'Sophie',
+	'Markus',
+	'Emma',
+];
+const LAST_NAMES = [
+	'Mustermann',
+	'Musterfrau',
+	'Doe',
+	'Smith',
+	'Schmidt',
+	'Müller',
+	'Weber',
+	'Meyer',
+	'Wagner',
+	'Becker',
+	'Fischer',
+	'Schneider',
+	'Hoffmann',
+	'Koch',
+	'Bauer',
+	'Richter',
+	'Klein',
+	'Wolf',
+	'Schröder',
+	'Neumann',
+];
+const STATUSES = ['active', 'inactive', 'pending'];
+
+const generateData = (count: number): DataRow[] => {
+	return Array.from({ length: count }, (_, i) => {
+		const firstName = FIRST_NAMES[i % FIRST_NAMES.length];
+		const lastName = LAST_NAMES[Math.floor(i / FIRST_NAMES.length) % LAST_NAMES.length];
+		const status = STATUSES[i % STATUSES.length];
+		const id = i + 1;
+
+		return {
+			id,
+			name: `${firstName} ${lastName}`,
+			email: `${firstName.toLowerCase()}.${lastName.toLowerCase()}${id > 20 ? id : ''}@example.com`,
+			status,
+		};
+	});
+};
+
+const DATA: DataRow[] = generateData(ROWS_COUNT);
+
+const HEADERS: { horizontal: KoliBriTableHeaderCellWithLogic[][] } = {
+	horizontal: [
+		[
+			{
+				key: 'id',
+				label: 'ID',
+				textAlign: 'left',
+				width: 60,
+				compareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) => (data0 as unknown as DataRow).id - (data1 as unknown as DataRow).id,
+				sortDirection: 'ASC',
+			},
+			{
+				key: 'name',
+				label: 'Name',
+				textAlign: 'left',
+				compareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) =>
+					(data0 as unknown as DataRow).name.localeCompare((data1 as unknown as DataRow).name, 'de'),
+				sortDirection: 'ASC',
+			},
+			{
+				key: 'email',
+				label: 'E-Mail',
+				textAlign: 'left',
+				compareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) =>
+					(data0 as unknown as DataRow).email.localeCompare((data1 as unknown as DataRow).email, 'de'),
+				sortDirection: 'ASC',
+			},
+			{
+				key: 'status',
+				label: 'Status',
+				textAlign: 'center',
+				width: 100,
+				compareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) =>
+					(data0 as unknown as DataRow).status.localeCompare((data1 as unknown as DataRow).status, 'de'),
+				sortDirection: 'ASC',
+			},
+			{
+				type: 'action',
+				key: 'actions',
+				label: 'Aktionen',
+				textAlign: 'center',
+				width: 180,
+				actions: (row) => {
+					const dataRow = row as unknown as DataRow;
+					return [
+						{
+							type: 'button',
+							_label: 'Bearbeiten',
+							_icons: 'kolicon-eye',
+							_hideLabel: true,
+							_tooltipAlign: 'top',
+							_variant: 'secondary',
+							_on: {
+								onClick: () => {
+									console.log('Edit clicked for:', dataRow);
+									alert(`Bearbeiten: ${dataRow.name}`);
+								},
+							},
+						},
+						{
+							type: 'button',
+							_label: 'Löschen',
+							_icons: 'kolicon-alert-error',
+							_hideLabel: true,
+							_tooltipAlign: 'top',
+							_variant: 'danger',
+							_on: {
+								onClick: () => {
+									console.log('Delete clicked for:', dataRow);
+									alert(`Löschen: ${dataRow.name}`);
+								},
+							},
+						},
+						{
+							type: 'button',
+							_label: 'Details anzeigen',
+							_icons: 'kolicon-alert-info',
+							_hideLabel: true,
+							_tooltipAlign: 'top',
+							_variant: 'normal',
+							_on: {
+								onClick: () => {
+									console.log('Details clicked for:', dataRow);
+									alert(`Details: ${JSON.stringify(dataRow, null, 2)}`);
+								},
+							},
+						},
+					];
+				},
+			},
+		],
+	],
+};
+
+export const TableActionColumnPerformance: FC = () => (
+	<>
+		<SampleDescription>
+			<p>
+				Performance demo: {ROWS_COUNT} rows with action buttons defined once in the column header using the refactored approach. The factory function generates
+				actions for each row on demand, eliminating redundant data and improving maintainability.
+			</p>
+			<p>
+				Actions stay type-safe with <code>ActionColumnPropType</code> (ButtonProps or LinkProps), and no custom render functions are needed.
+			</p>
+		</SampleDescription>
+
+		<section className="w-full">
+			<KolTableStateful _label="Benutzerverwaltung mit Action-Spalte" _headers={HEADERS} _data={DATA} className="block" />
+		</section>
+	</>
+);

package/src/components/table/action-columns.tsx

@@ -0,0 +1,105 @@
+import type { KoliBriTableHeaderCellWithLogic } from '@public-ui/components';
+import { KolTableStateful } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+type ProjectTask = {
+	id: string;
+	project: string;
+	owner: string;
+};
+
+const HEADERS: { horizontal: KoliBriTableHeaderCellWithLogic[][] } = {
+	horizontal: [
+		[
+			{ key: 'id', label: 'ID', width: 80 },
+			{ key: 'project', label: 'Project' },
+			{ key: 'owner', label: 'Owner', width: 140 },
+			{
+				type: 'action',
+				key: 'actions',
+				label: 'Actions',
+				width: 250,
+				actions: (row) => {
+					const simpleRow = row as ProjectTask;
+					return [
+						{
+							type: 'button',
+							_label: 'Details',
+							_icons: 'kolicon-eye',
+							_hideLabel: true,
+							_on: {
+								onClick: () => alert(`Details: ${simpleRow.id} - ${simpleRow.project}`),
+							},
+						},
+						{
+							type: 'button',
+							_label: 'Start',
+							_icons: 'kolicon-chevron-right',
+							_variant: 'secondary',
+							_on: {
+								onClick: () => alert(`Start task ${simpleRow.id}`),
+							},
+						},
+						{
+							type: 'link',
+							_label: 'View',
+							_href: `#/back-page?taskId=${simpleRow.id}`,
+							_target: '_blank',
+							_icons: 'kolicon-external-link',
+							_hideLabel: false,
+						},
+					];
+				},
+			},
+			{
+				type: 'action',
+				key: 'externalActions',
+				label: 'External Actions',
+				width: 280,
+				actions: (row) => {
+					const simpleRow = row as ProjectTask;
+					return [
+						{
+							type: 'link',
+							_label: 'View on Dashboard',
+							_href: `#/back-page?taskId=${simpleRow.id}`,
+							_target: '_blank',
+							_icons: 'kolicon-external-link',
+							_hideLabel: false,
+						},
+					];
+				},
+			},
+		],
+	],
+};
+
+const DATA: ProjectTask[] = [
+	{
+		id: 'T-01',
+		project: 'Onboarding checklist',
+		owner: 'Alex Rivera',
+	},
+	{
+		id: 'T-02',
+		project: 'Accessibility audit',
+		owner: 'Jamie Chen',
+	},
+];
+
+export const TableActionColumns: FC = () => (
+	<>
+		<SampleDescription>
+			<p>
+				Simple example using the refactored action column: Actions are defined once in the column header definition using a factory function. Two rows with
+				inline action buttons demonstrate clean separation between data and UI behavior.
+			</p>
+		</SampleDescription>
+
+		<section className="w-full">
+			<KolTableStateful _label="Tasks with action buttons" _headers={HEADERS} _data={DATA} className="block" />
+		</section>
+	</>
+);

package/src/components/table/render-cell.tsx

@@ -15,23 +15,30 @@ type Data = {
 	date: Date;
 	shipped: boolean;
 };
-const DATA: Data[] = [
-	{
-		order: 0,
-		shipped: false,
-		date: new Date('1981-05-26T21:33:43.612Z'),
-	},
-	{
-		order: 1,
-		shipped: true,
-		date: new Date('1971-04-25T19:44:17.014Z'),
-	},
-	{
-		order: 2,
-		shipped: false,
-		date: new Date('1986-07-10T11:39:29.539Z'),
-	},
-];
+
+/**
+ * Generates n data entries with random dates and shipping status
+ * @param n - Number of data entries to generate
+ * @returns Array of Data objects
+ */
+function generateDataEntries(n: number): Data[] {
+	const entries: Data[] = [];
+	const startDate = new Date('1970-01-01').getTime();
+	const endDate = new Date('2025-12-31').getTime();
+
+	for (let i = 0; i < n; i++) {
+		const randomTimestamp = startDate + Math.random() * (endDate - startDate);
+		entries.push({
+			order: i,
+			shipped: Math.random() > 0.5,
+			date: new Date(randomTimestamp),
+		});
+	}
+
+	return entries;
+}
+
+const DATA: Data[] = generateDataEntries(100);
 
 function KolButtonWrapper({ label, icons }: { label: string; icons: IconsPropType }) {
 	const { dummyClickEventHandler } = useToasterService();

package/src/components/table/routes.ts

@@ -1,4 +1,6 @@
 import { Routes } from '../../shares/types';
+import { TableActionColumns } from './action-columns';
+import { TableActionColumnPerformance } from './action-columns-performance';
 import { TableColumnAlignment } from './column-alignment';
 import { TableComplexHeaders } from './complex-headers';
 import { TableDirectionAwareSort } from './direction-aware-sort';
@@ -32,6 +34,8 @@ export const TABLE_ROUTES: Routes = {
 		'non-hidable-columns': TableNonHidableColumns,
 		'pagination-position': PaginationPosition,
 		'predefined-settings': PredefinedSettings,
+		'action-columns': TableActionColumns,
+		'action-columns-performance': TableActionColumnPerformance,
 		'render-cell': TableRenderCell,
 		'settings-column-options': TableSettingsColumnOptions,
 		'sort-data': TableSortData,

package/src/components/table/sticky-header.tsx

@@ -1,15 +1,23 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import type { KoliBriTableHeaders } from '@public-ui/components';
+import type { KoliBriTableHeaders, KoliBriTableSelection } from '@public-ui/components';
 import { KolHeading, KolTableStateful } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 import { COMPLEX_DATA } from './test-complex-data';
 
+type Data = (typeof COMPLEX_DATA)[0];
+
+const selection: KoliBriTableSelection = {
+	label: (row) => `Selection for ${(row as Data).common_name}`,
+	multiple: false,
+	keyPropertyName: 'internalIdentifier',
+};
+
 const HEADERS_HORIZONTAL: KoliBriTableHeaders = {
 	horizontal: [
 		[
-			{ label: 'ID', key: 'id', textAlign: 'right', width: 160 },
+			{ label: 'ID', key: 'id', textAlign: 'right', width: 60 },
 			{ label: 'Common name', key: 'common_name', textAlign: 'left', width: 160 },
 			{ label: 'Scientific name', key: 'scientific_name', textAlign: 'left', width: 160 },
 			{ label: 'Conservation status', key: 'conservation_status', textAlign: 'left', width: 160 },
@@ -24,12 +32,12 @@ export const TableStickyHeader: FC = () => (
 	<>
 		<SampleDescription>
 			<p>
-				This sample shows KolTableStateful with horizontal and vertical scrollbars. It should be focusable and scrollable with the keyboard. The table headline
-				should be sticky at the top of the table. The data now lists animal species with conservation-focused details.
+				This sample shows KolTableStateful with vertical scrollbar. It should be focusable and scrollable with the keyboard. The table headline should be sticky
+				at the top of the table. The data lists animal species with conservation-focused details.
 			</p>
 		</SampleDescription>
 
 		<KolHeading _level={2} _label="Sticky headers" />
-		<KolTableStateful _label="Animal species overview" _data={COMPLEX_DATA} _headers={HEADERS_HORIZONTAL} className="block" />
+		<KolTableStateful _label="Animal species overview" _data={COMPLEX_DATA} _headers={HEADERS_HORIZONTAL} className="block" _selection={selection} />
 	</>
 );

package/src/scenarios/routes.ts

@@ -15,6 +15,7 @@ import { SampleFormWithValidation } from './sample-form-with-validation';
 import { StaticForm } from './static-form';
 import { ToolbarItemOrder } from './toolbar-item-order';
 import { TooltipPositioning } from './tooltip-positioning';
+import { ZIndexScenario } from './z-index';
 
 export const SCENARIO_ROUTES: Routes = {
 	scenarios: {
@@ -33,6 +34,7 @@ export const SCENARIO_ROUTES: Routes = {
 		'table-horizontal-scrollbar-advanced': TableHorizontalScrollAdvanced,
 		'toolbar-item-order': ToolbarItemOrder,
 		'tooltip-positioning': TooltipPositioning,
+		'z-index': ZIndexScenario,
 		'performance-test': PerformanceTest,
 	},
 };

package/src/scenarios/z-index.tsx

@@ -0,0 +1,50 @@
+import type { FC } from 'react';
+import React, { useEffect, useRef } from 'react';
+
+import { KolButton, KolCombobox, KolDialog, KolPopoverButton } from '@public-ui/react-v19';
+import { useSearchParams } from 'react-router';
+import { SampleDescription } from '../components/SampleDescription';
+
+export const ZIndexScenario: FC = () => {
+	const [searchParams] = useSearchParams();
+
+	const showDialog = searchParams.get('show-dialog') as string;
+
+	const cardRef = useRef<HTMLKolDialogElement>(null);
+
+	const onOpenCardDialog = {
+		onClick: () => cardRef.current?.openModal(),
+	};
+
+	useEffect(() => {
+		if (showDialog === 'true') {
+			cardRef.current?.openModal();
+		}
+	}, []);
+
+	return (
+		<>
+			<SampleDescription>
+				<p>This sample shows the combination of a few components overlaying content. Dialog, Popover, Tooltip</p>
+			</SampleDescription>
+
+			<div className="grid gap-8">
+				<div>
+					<KolButton _label="Open card dialog" _on={onOpenCardDialog} />
+					<KolDialog ref={cardRef} _label="Card dialog" _variant="card" _width="30%">
+						<KolPopoverButton _label="Help" _icons="kolicon-alert-info" _popoverAlign="right" _tooltipAlign="bottom" _hideLabel>
+							<div className="w-sm p-2 border border-solid border-gray">
+								<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>
+								<KolButton _hideLabel _icons="kolicon-check" _label="OK" _variant="primary" />
+							</div>
+						</KolPopoverButton>
+						<KolCombobox _label="With string array in html" _suggestions="['Herr','Frau','Firma']" _value="Herr" _hideLabel />
+					</KolDialog>
+				</div>
+			</div>
+		</>
+	);
+};

package/dist/assets/Alert-w-XRy_I0-CznPxzhK.js

@@ -1,2 +0,0 @@
-import{_ as A}from"./tslib.es6-CxX45GIN-BGVaTf34.js";import{N as v,h as a,O as f,e as C,P as p,i as L,Q as E,F as S}from"./index-DIuqfJDU.js";import{c as y}from"./clsx-eK3rPvPS-B-dksMZM.js";import{t as o}from"./i18n-CvQhdUrE-lxo4la7F.js";import{K as T}from"./Heading-C1x8c7QT-CIPkCiq9.js";const O=o("kol-error"),B=o("kol-info"),M=o("kol-warning"),I=o("kol-success"),K=o("kol-message"),r=({ariaLabel:e,icon:t})=>a(S,null,a("span",{class:"visually-hidden"},e),a(L,{class:E,_label:"",_icons:t})),N=({type:e,label:t})=>{switch(e){case"error":return a(r,{ariaLabel:O,icon:"kolicon-alert-error",label:t});case"info":return a(r,{ariaLabel:B,icon:"kolicon-alert-info",label:t});case"warning":return a(r,{ariaLabel:M,icon:"kolicon-alert-warning",label:t});case"success":return a(r,{ariaLabel:I,icon:"kolicon-alert-success",label:t});default:return a(r,{ariaLabel:K,icon:"kolicon-alert-info",label:t})}},R=o("kol-close-alert"),w=()=>{if(typeof navigator>"u"||typeof navigator.vibrate!="function")return;const e=navigator.userActivation;if((e?.isActive||e?.hasBeenActive)&&matchMedia("(any-pointer: coarse)").matches)try{navigator.vibrate([100,75,100,75,100])}catch{}},D=(e,t)=>{const{class:i={},alert:c=!1,hasCloser:d=!1,label:s,level:u=0,type:_="default",variant:n="msg",onAlertTimeout:l,onCloserClick:b}=e,g=A(e,["class","alert","hasCloser","label","level","type","variant","onAlertTimeout","onCloserClick"]);c&&(w(),setTimeout(()=>{l?.()},1e4));const m=v("kol-alert",{hasCloser:!!d,[`type-${_}`]:!0,[`variant-${n}`]:!0}),k=v("kol-alert","heading",{[`h${u}`]:!0}),h=Object.assign({class:y(i,m)},g);return a("div",Object.assign({role:c?"alert":void 0},h,{"data-testid":"alert"}),a("div",{class:"kol-alert__container"},a(N,{label:s,type:_}),a("div",{class:"kol-alert__container-content"},s&&a(T,{class:k,level:u,id:"heading"},s),n==="msg"&&a("span",{class:f,"aria-describedby":s?"heading":void 0},t)),d&&a(C,{class:p,"data-testid":"alert-close-button",_ariaDescription:s?.trim()||"",_hideLabel:!0,_icons:{left:{icon:"kolicon-cross"}},_label:R,_on:{onClick:b},_tooltipAlign:"left"})),n==="card"&&a("div",{class:f,"aria-describedby":s?"heading":void 0},t))};export{D as K};
-//# sourceMappingURL=Alert-w-XRy_I0-CznPxzhK.js.map

package/dist/assets/Alert-w-XRy_I0-CznPxzhK.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Alert-w-XRy_I0-CznPxzhK.js","sources":["../../../../components/dist/esm/Alert-w-XRy_I0.js"],"sourcesContent":["/*!\n * KoliBri - The accessible HTML-Standard\n */\nimport { _ as __rest } from './tslib.es6-CxX45GIN.js';\nimport { h, F as Fragment } from './index-DyUiyxj3.js';\nimport { c as clsx } from './clsx-eK3rPvPS.js';\nimport { e as KolIconTag, d as KolButtonWcTag } from './component-names-B_kYyA8u.js';\nimport { t as translate } from './i18n-CvQhdUrE.js';\nimport { a as BEM_CLASS_ALERT__ICON, b as bem, c as BEM_CLASS_ALERT__CONTENT, d as BEM_CLASS_ALERT__CLOSER } from './bem-De7JANRY.js';\nimport { K as KolHeadingFc } from './Heading-C1x8c7QT.js';\n\nconst translateError = translate('kol-error');\nconst translateInfo = translate('kol-info');\nconst translateWarning = translate('kol-warning');\nconst translateSuccess = translate('kol-success');\nconst translateMessage = translate('kol-message');\nconst Icon = ({ ariaLabel, icon }) => {\n    return (h(Fragment, null, h(\"span\", { class: \"visually-hidden\" }, ariaLabel), h(KolIconTag, { class: BEM_CLASS_ALERT__ICON, _label: \"\", _icons: icon })));\n};\nconst AlertIcon = ({ type, label }) => {\n    switch (type) {\n        case 'error':\n            return h(Icon, { ariaLabel: translateError, icon: \"kolicon-alert-error\", label: label });\n        case 'info':\n            return h(Icon, { ariaLabel: translateInfo, icon: \"kolicon-alert-info\", label: label });\n        case 'warning':\n            return h(Icon, { ariaLabel: translateWarning, icon: \"kolicon-alert-warning\", label: label });\n        case 'success':\n            return h(Icon, { ariaLabel: translateSuccess, icon: \"kolicon-alert-success\", label: label });\n        default:\n            return h(Icon, { ariaLabel: translateMessage, icon: \"kolicon-alert-info\", label: label });\n    }\n};\n\nconst translateCloseAlert = translate('kol-close-alert');\nconst vibrateOnError = () => {\n    if (typeof navigator === 'undefined' || typeof navigator.vibrate !== 'function') {\n        return;\n    }\n    const ua = navigator.userActivation;\n    const hasGesture = (ua === null || ua === void 0 ? void 0 : ua.isActive) || (ua === null || ua === void 0 ? void 0 : ua.hasBeenActive);\n    if (!hasGesture) {\n        return;\n    }\n    if (!matchMedia('(any-pointer: coarse)').matches) {\n        return;\n    }\n    try {\n        navigator.vibrate([100, 75, 100, 75, 100]);\n    }\n    catch (_a) {\n    }\n};\nconst KolAlertFc = (props, children) => {\n    const { class: classNames = {}, alert = false, hasCloser = false, label, level = 0, type = 'default', variant = 'msg', onAlertTimeout, onCloserClick } = props, other = __rest(props, [\"class\", \"alert\", \"hasCloser\", \"label\", \"level\", \"type\", \"variant\", \"onAlertTimeout\", \"onCloserClick\"]);\n    if (alert) {\n        vibrateOnError();\n        setTimeout(() => {\n            onAlertTimeout === null || onAlertTimeout === void 0 ? void 0 : onAlertTimeout();\n        }, 10000);\n    }\n    const BEM_CLASS_ROOT = bem('kol-alert', {\n        hasCloser: !!hasCloser,\n        [`type-${type}`]: true,\n        [`variant-${variant}`]: true,\n    });\n    const BEM_CLASS__HEADING = bem('kol-alert', 'heading', {\n        [`h${level}`]: true,\n    });\n    const rootProps = Object.assign({ class: clsx(classNames, BEM_CLASS_ROOT) }, other);\n    return (h(\"div\", Object.assign({ role: alert ? 'alert' : undefined }, rootProps, { \"data-testid\": \"alert\" }), h(\"div\", { class: \"kol-alert__container\" }, h(AlertIcon, { label: label, type: type }), h(\"div\", { class: \"kol-alert__container-content\" }, label && (h(KolHeadingFc, { class: BEM_CLASS__HEADING, level: level, id: \"heading\" }, label)), variant === 'msg' && (h(\"span\", { class: BEM_CLASS_ALERT__CONTENT, \"aria-describedby\": label ? 'heading' : undefined }, children))), hasCloser && (h(KolButtonWcTag, { class: BEM_CLASS_ALERT__CLOSER, \"data-testid\": \"alert-close-button\", _ariaDescription: (label === null || label === void 0 ? void 0 : label.trim()) || '', _hideLabel: true, _icons: {\n            left: {\n                icon: 'kolicon-cross',\n            },\n        }, _label: translateCloseAlert, _on: { onClick: onCloserClick }, _tooltipAlign: \"left\" }))), variant === 'card' && (h(\"div\", { class: BEM_CLASS_ALERT__CONTENT, \"aria-describedby\": label ? 'heading' : undefined }, children))));\n};\n\nexport { KolAlertFc as K };\n//# sourceMappingURL=Alert-w-XRy_I0.js.map\n\n//# sourceMappingURL=Alert-w-XRy_I0.js.map"],"names":["translateError","translate","translateInfo","translateWarning","translateSuccess","translateMessage","Icon","ariaLabel","icon","h","Fragment","KolIconTag","BEM_CLASS_ALERT__ICON","AlertIcon","type","label","translateCloseAlert","vibrateOnError","ua","KolAlertFc","props","children","classNames","alert","hasCloser","level","variant","onAlertTimeout","onCloserClick","other","__rest","BEM_CLASS_ROOT","bem","BEM_CLASS__HEADING","rootProps","clsx","KolHeadingFc","BEM_CLASS_ALERT__CONTENT","KolButtonWcTag","BEM_CLASS_ALERT__CLOSER"],"mappings":"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"}

package/dist/assets/clsx-eK3rPvPS-B-dksMZM.js

@@ -1,2 +0,0 @@
-function a(r){var f,n,t="";if(typeof r=="string"||typeof r=="number")t+=r;else if(typeof r=="object")if(Array.isArray(r)){var o=r.length;for(f=0;f<o;f++)r[f]&&(n=a(r[f]))&&(t&&(t+=" "),t+=n)}else for(n in r)r[n]&&(t&&(t+=" "),t+=n);return t}function i(){for(var r,f,n=0,t="",o=arguments.length;n<o;n++)(r=arguments[n])&&(f=a(r))&&(t&&(t+=" "),t+=f);return t}export{i as c};
-//# sourceMappingURL=clsx-eK3rPvPS-B-dksMZM.js.map

package/dist/assets/clsx-eK3rPvPS-B-dksMZM.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"clsx-eK3rPvPS-B-dksMZM.js","sources":["../../../../components/dist/esm/clsx-eK3rPvPS.js"],"sourcesContent":["/*!\n * KoliBri - The accessible HTML-Standard\n */\nfunction r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f);}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}\n\nexport { clsx as c };\n//# sourceMappingURL=clsx-eK3rPvPS.js.map\n\n//# sourceMappingURL=clsx-eK3rPvPS.js.map"],"names":["r","e","t","f","n","clsx"],"mappings":"AAGA,SAASA,EAAEC,EAAE,CAAC,IAAIC,EAAEC,EAAEC,EAAE,GAAG,GAAa,OAAOH,GAAjB,UAA8B,OAAOA,GAAjB,SAAmBG,GAAGH,UAAoB,OAAOA,GAAjB,SAAmB,GAAG,MAAM,QAAQA,CAAC,EAAE,CAAC,IAAI,EAAEA,EAAE,OAAO,IAAIC,EAAE,EAAEA,EAAE,EAAEA,IAAID,EAAEC,CAAC,IAAIC,EAAEH,EAAEC,EAAEC,CAAC,CAAC,KAAKE,IAAIA,GAAG,KAAKA,GAAGD,EAAG,KAAM,KAAIA,KAAKF,EAAEA,EAAEE,CAAC,IAAIC,IAAIA,GAAG,KAAKA,GAAGD,GAAG,OAAOC,CAAC,CAAC,SAASC,GAAM,CAAC,QAAQJ,EAAEC,EAAEC,EAAE,EAAEC,EAAE,GAAG,EAAE,UAAU,OAAOD,EAAE,EAAEA,KAAKF,EAAE,UAAUE,CAAC,KAAKD,EAAEF,EAAEC,CAAC,KAAKG,IAAIA,GAAG,KAAKA,GAAGF,GAAG,OAAOE,CAAC"}

package/dist/assets/custom-class-B6h_ZSR7-Ci-d1h3B.js

@@ -1,2 +0,0 @@
-import{q as t}from"./index-DIuqfJDU.js";const o=(a,s)=>{t(a,"_customClass",s,{defaultValue:void 0})};export{o as v};
-//# sourceMappingURL=custom-class-B6h_ZSR7-Ci-d1h3B.js.map

package/dist/assets/disabled-D0wfAqak-AysY0N9Q.js

@@ -1,2 +0,0 @@
-import{n as o,C as s}from"./index-DIuqfJDU.js";const d=(a,t)=>{o(a,"_disabled",t,{hooks:{afterPatch:e=>{e===!0&&s()}}})};export{d as v};
-//# sourceMappingURL=disabled-D0wfAqak-AysY0N9Q.js.map

package/dist/assets/has-closer-OxGfsISj-ChhsY7L3.js

@@ -1,2 +0,0 @@
-import{n as s}from"./index-DIuqfJDU.js";const r=(a,o)=>{s(a,"_hasCloser",o)};export{r as v};
-//# sourceMappingURL=has-closer-OxGfsISj-ChhsY7L3.js.map

package/dist/assets/has-closer-OxGfsISj-ChhsY7L3.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"has-closer-OxGfsISj-ChhsY7L3.js","sources":["../../../../components/dist/esm/has-closer-OxGfsISj.js"],"sourcesContent":["/*!\n * KoliBri - The accessible HTML-Standard\n */\nimport { d as watchBoolean } from './common-BXXICkFX.js';\n\nconst validateHasCloser = (component, value) => {\n    watchBoolean(component, '_hasCloser', value);\n};\n\nexport { validateHasCloser as v };\n//# sourceMappingURL=has-closer-OxGfsISj.js.map\n\n//# sourceMappingURL=has-closer-OxGfsISj.js.map"],"names":["validateHasCloser","component","value","watchBoolean"],"mappings":"wCAKK,MAACA,EAAoB,CAACC,EAAWC,IAAU,CAC5CC,EAAaF,EAAW,aAAcC,CAAK,CAC/C"}

package/dist/assets/hide-label-90DGA8H4-BdjNal7t.js

@@ -1,2 +0,0 @@
-import{n as t}from"./index-DIuqfJDU.js";const l=(a,e,o={})=>{t(a,"_hideLabel",e,o)};export{l as v};
-//# sourceMappingURL=hide-label-90DGA8H4-BdjNal7t.js.map

package/dist/assets/href-BDekIhFd-J27mBp9-.js

@@ -1,2 +0,0 @@
-import{q as e}from"./index-DIuqfJDU.js";const f=(r,t,a={})=>{e(r,"_href",t,a)};export{f as v};
-//# sourceMappingURL=href-BDekIhFd-J27mBp9-.js.map

package/dist/assets/href-BDekIhFd-J27mBp9-.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"href-BDekIhFd-J27mBp9-.js","sources":["../../../../components/dist/esm/href-BDekIhFd.js"],"sourcesContent":["/*!\n * KoliBri - The accessible HTML-Standard\n */\nimport { e as watchString } from './common-BXXICkFX.js';\n\nconst validateHref = (component, value, options = {}) => {\n    watchString(component, '_href', value, options);\n};\n\nexport { validateHref as v };\n//# sourceMappingURL=href-BDekIhFd.js.map\n\n//# sourceMappingURL=href-BDekIhFd.js.map"],"names":["validateHref","component","value","options","watchString"],"mappings":"wCAKK,MAACA,EAAe,CAACC,EAAWC,EAAOC,EAAU,CAAA,IAAO,CACrDC,EAAYH,EAAW,QAASC,EAAOC,CAAO,CAClD"}

package/dist/assets/i18n-CvQhdUrE-lxo4la7F.js

@@ -1,2 +0,0 @@
-import{Y as e,Z as i,M as s}from"./index-DIuqfJDU.js";let r=(t,n)=>{var a;return((a=e())!==null&&a!==void 0?a:i("de")).translate(t,n)};s()&&(r=t=>t);export{r as t};
-//# sourceMappingURL=i18n-CvQhdUrE-lxo4la7F.js.map

package/dist/assets/image-source-udiqQ1zY-DWqLlxxT.js

@@ -1,2 +0,0 @@
-import{q as o}from"./index-DIuqfJDU.js";const e=(a,r,t)=>{o(a,"_src",r,t)};export{e as v};
-//# sourceMappingURL=image-source-udiqQ1zY-DWqLlxxT.js.map

package/dist/assets/image-source-udiqQ1zY-DWqLlxxT.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"image-source-udiqQ1zY-DWqLlxxT.js","sources":["../../../../components/dist/esm/image-source-udiqQ1zY.js"],"sourcesContent":["/*!\n * KoliBri - The accessible HTML-Standard\n */\nimport { e as watchString } from './common-BXXICkFX.js';\n\nconst validateImageSource = (component, value, options) => {\n    watchString(component, '_src', value, options);\n};\n\nexport { validateImageSource as v };\n//# sourceMappingURL=image-source-udiqQ1zY.js.map\n\n//# sourceMappingURL=image-source-udiqQ1zY.js.map"],"names":["validateImageSource","component","value","options","watchString"],"mappings":"wCAKK,MAACA,EAAsB,CAACC,EAAWC,EAAOC,IAAY,CACvDC,EAAYH,EAAW,OAAQC,EAAOC,CAAO,CACjD"}