@public-ui/sample-react 1.7.25 → 1.7.26-rc.1

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

@@ -6,6 +6,7 @@ import { createReactRenderElement, KolButton, KolInputText, KolTable } from '@pu
 import { getRoot } from '../../shares/react-roots';
 import type { KoliBriTableHeaders } from '@public-ui/components';
 import { DATE_FORMATTER } from './formatter';
+import { SampleDescription } from '../SampleDescription';
 
 type Data = {
 	order: number;
@@ -96,4 +97,11 @@ const HEADERS: KoliBriTableHeaders = {
 	],
 };
 
-export const TableRenderCell: FC = () => <KolTable _label="Sort by date column" _data={DATA} _headers={HEADERS} className="block min-w-75em" />;
+export const TableRenderCell: FC = () => (
+	<>
+		<SampleDescription>
+			<p>This sample shows KolTable using React render functions for the cell contents.</p>
+		</SampleDescription>
+		<KolTable _label="Sort by date column" _data={DATA} _headers={HEADERS} className="block min-w-75em" />
+	</>
+);

package/src/components/table/routes.ts

@@ -1,6 +1,4 @@
 import { Routes } from '../../shares/types';
-
-import { TableBadgeSize } from './badge-size';
 import { TableRenderCell } from './render-cell';
 import { TableSortData } from './sort-date';
 import { TableWithPagination } from './with-pagination';
@@ -9,7 +7,6 @@ import { TableHorizontalScrollbar } from './horizontal-scrollbar';
 
 export const TABLE_ROUTES: Routes = {
 	table: {
-		'badge-size': TableBadgeSize,
 		'column-alignment': TableColumnAlignment,
 		'horizontal-scrollbar': TableHorizontalScrollbar,
 		'render-cell': TableRenderCell,

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

@@ -3,6 +3,7 @@ import React, { FC } from 'react';
 import { KolTable } from '@public-ui/react';
 import { KoliBriTableHeaders } from '@public-ui/components';
 import { DATA, Data } from './test-data';
+import { SampleDescription } from '../SampleDescription';
 
 const DATE_FORMATTER = Intl.DateTimeFormat('de-DE', {
 	day: '2-digit',
@@ -30,4 +31,11 @@ const HEADERS: KoliBriTableHeaders = {
 	],
 };
 
-export const TableSortData: FC = () => <KolTable _caption="Sort a date column" _data={DATA} _headers={HEADERS} className="block" />;
+export const TableSortData: FC = () => (
+	<>
+		<SampleDescription>
+			<p>This sample shows KolTable with sortable columns. The sort-order can be changed by clicking the &quot;date&quot; header column.</p>
+		</SampleDescription>
+		<KolTable _caption="Sort a date column" _data={DATA} _headers={HEADERS} className="block" />
+	</>
+);

package/src/components/table/with-pagination.tsx

@@ -22,10 +22,7 @@ const PAGINATION: KoliBriTablePaginationProps = { _page: 2 };
 export const TableWithPagination: FC = () => (
 	<>
 		<SampleDescription>
-			<p>
-				Durch das Navigieren der Seitenzahlen unten kann die Tabelle umgeblättert werden. Stattdessen kann auch die komplette Tabelle mit Änderung der Einträge
-				pro Seite angezeigt werden.
-			</p>
+			<p>This sample shows how KolTable can be navigated using a pagination.</p>
 		</SampleDescription>
 		<div>
 			<KolTable _label="Tabellenbeschreibung" _data={DATA} _headers={HEADERS} _pagination={PAGINATION}></KolTable>

package/src/components/tabs/basic.tsx

@@ -2,6 +2,7 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { KolTabs } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
 
 const tabs = [
 	{
@@ -30,6 +31,9 @@ const tabsWithoutIcons = tabs.map((tab) => ({
 
 export const TabsBasic: FC = () => (
 	<>
+		<SampleDescription>
+			<p>KolTabs renders tab captions and their associated content. This sample shows tab captions with and without icons and disabled tabs.</p>
+		</SampleDescription>
 		<KolTabs _tabs={tabsWithoutIcons} _label="Regular tabs">
 			<div slot="tab-0">Inhalte von Tab 1</div>
 			<div slot="tab-1">Inhalte von Tab 2</div>

package/src/components/tabs/icons-only.tsx

@@ -1,5 +1,6 @@
 import React, { FC } from 'react';
 import { KolTabs } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
 
 const tabs = [
 	{
@@ -25,10 +26,15 @@ const tabs = [
 	},
 ];
 export const TabsIconsOnly: FC = () => (
-	<KolTabs _tabs={tabs}>
-		<div slot="tab-0">Inhalte von Tab 1</div>
-		<div slot="tab-1">Inhalte von Tab 2</div>
-		<div slot="tab-2">Inhalte von Tab 3</div>
-		<div slot="tab-3">Inhalte von Tab 4</div>
-	</KolTabs>
+	<>
+		<SampleDescription>
+			<p>This sample shows KolTabs with hidden labels.</p>
+		</SampleDescription>
+		<KolTabs _tabs={tabs}>
+			<div slot="tab-0">Inhalte von Tab 1</div>
+			<div slot="tab-1">Inhalte von Tab 2</div>
+			<div slot="tab-2">Inhalte von Tab 3</div>
+			<div slot="tab-3">Inhalte von Tab 4</div>
+		</KolTabs>
+	</>
 );

package/src/components/textarea/adjust-height.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { KolForm, KolTextarea } from '@public-ui/react';
 
 import { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 const VALUE = `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
 magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
@@ -11,12 +12,15 @@ et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea t
 sit amet.`;
 
 export const TextareaAdjustHeight: FC = () => (
-	<KolForm className="row">
-		<div className="col-sm-6">
-			<KolTextarea _adjustHeight={true} _resize="vertical" _value={VALUE} _label="Texteingabe (horizontal)" />
-		</div>
-		<div className="col-sm-6">
-			<KolTextarea _adjustHeight={true} _resize="none" _value={VALUE} _label="Texteingabe (none)" />
-		</div>
-	</KolForm>
+	<>
+		<SampleDescription>
+			<p>
+				This sample demonstrates the <code>_adjustHeight</code>-property of KolTextarea. The textarea automatically grows with its content.
+			</p>
+		</SampleDescription>
+
+		<KolForm>
+			<KolTextarea _adjustHeight={true} _value={VALUE} _label="Text input (auto grow)" />
+		</KolForm>
+	</>
 );

package/src/components/textarea/basic.tsx

@@ -1,5 +1,14 @@
 import React, { FC } from 'react';
 import { FormWrap } from '../FormWrap';
 import { TextareaVariants } from './partials/variants';
+import { SampleDescription } from '../SampleDescription';
 
-export const TextareaBasic: FC = () => <FormWrap RefComponent={TextareaVariants} />;
+export const TextareaBasic: FC = () => (
+	<>
+		<SampleDescription>
+			<p>KolTextarea renders a text field. The sample shows KolTextarea in a form context with different variations and states.</p>
+		</SampleDescription>
+
+		<FormWrap RefComponent={TextareaVariants} />
+	</>
+);

package/src/components/textarea/counter.tsx

@@ -1,6 +1,15 @@
 import React, { FC } from 'react';
 import { KolTextarea } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
 
 export const TextareaCounter: FC = () => (
-	<KolTextarea _hasCounter={true} _label="Textara mit Counter und Hint und Fehler" _error={'oh no'} _hint={'Hinweis'} _touched />
+	<>
+		<SampleDescription>
+			<p>
+				This sample demonstrates the <code>_hasCounter</code>-property of KolTextarea. It shows how many characters have been entered.
+			</p>
+		</SampleDescription>
+
+		<KolTextarea _label="Textara with counter" _hasCounter={true} />
+	</>
 );

package/src/components/textarea/resize.tsx

@@ -2,12 +2,21 @@ import React from 'react';
 import { KolForm, KolTextarea } from '@public-ui/react';
 
 import { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const TextareaResize: FC = () => (
-	<KolForm className="grid gap-4">
-		<KolTextarea _resize="both" _label="Texteingabe (both)" />
-		<KolTextarea _resize="vertical" _label="Texteingabe (vertical)" />
-		<KolTextarea _resize="horizontal" _label="Texteingabe (horizontal)" />
-		<KolTextarea _resize="none" _label="Texteingabe (none)" />
-	</KolForm>
+	<>
+		<SampleDescription>
+			<p>
+				This sample demonstrates the <code>_resize</code>-property of KolTextarea. The sample textarea can (only) be resized in the given direction.
+			</p>
+		</SampleDescription>
+
+		<KolForm className="grid gap-4">
+			<KolTextarea _resize="both" _label="Text input (both)" />
+			<KolTextarea _resize="vertical" _label="Text input (vertical)" className="mt" />
+			<KolTextarea _resize="horizontal" _label="Text input (horizontal)" className="mt" />
+			<KolTextarea _resize="none" _label="Text input (none)" className="mt" />
+		</KolForm>
+	</>
 );

package/src/components/textarea/routes.ts

@@ -4,12 +4,6 @@ import { TextareaBasic } from './basic';
 
 import { TextareaAdjustHeight } from './adjust-height';
 
-import { TextareaDisabled } from './disabled';
-
-import { TextareaPlaceholder } from './placeholder';
-
-import { TextareaReadOnly } from './readonly';
-
 import { TextareaResize } from './resize';
 
 import { TextareaRows } from './rows';
@@ -19,9 +13,6 @@ export const TEXTAREA_ROUTES: Routes = {
 	textarea: {
 		basic: TextareaBasic,
 		'adjust-height': TextareaAdjustHeight,
-		disabled: TextareaDisabled,
-		placeholder: TextareaPlaceholder,
-		readonly: TextareaReadOnly,
 		resize: TextareaResize,
 		rows: TextareaRows,
 		'with-counter': TextareaCounter,

package/src/components/textarea/rows.tsx

@@ -2,9 +2,18 @@ import { KolForm, KolTextarea } from '@public-ui/react';
 import React from 'react';
 
 import { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const TextareaRows: FC = () => (
-	<KolForm>
-		<KolTextarea _rows={10} _label="Texteingabe" />
-	</KolForm>
+	<>
+		<SampleDescription>
+			<p>
+				This sample demonstrates the <code>_rows</code>-property of KolTextarea. The sample textarea has a fixed row number of 10.
+			</p>
+		</SampleDescription>
+
+		<KolForm>
+			<KolTextarea _rows={10} _label="Texteingabe" />
+		</KolForm>
+	</>
 );

package/src/components/toast/basic.tsx

@@ -2,6 +2,7 @@ import { ToasterService } from '@public-ui/components';
 import { KolButton } from '@public-ui/react';
 import React, { FC } from 'react';
 import { getRoot } from '../../shares/react-roots';
+import { SampleDescription } from '../SampleDescription';
 
 export const ToastBasic: FC = () => {
 	const toaster = ToasterService.getInstance(document);
@@ -53,15 +54,21 @@ export const ToastBasic: FC = () => {
 	};
 
 	return (
-		<div>
-			<KolButton _label="Show simple toast" _on={{ onClick: handleButtonClickSimple }}></KolButton>
-			<KolButton _label="Show complex toast" _on={{ onClick: handleButtonClickComplex }}></KolButton>
-			<br />
-			<br />
-			<KolButton _label="Show toast and close after 2 seconds" _on={{ onClick: () => void handleButtonClickOpenAndClose() }}></KolButton>
-			<br />
-			<br />
-			<KolButton _label="Close all toasts" _on={{ onClick: closeAll }}></KolButton>
-		</div>
+		<>
+			<SampleDescription>
+				<p>This sample demonstrates the toast service with all its options.</p>
+			</SampleDescription>
+
+			<div>
+				<KolButton _label="Show simple toast" _on={{ onClick: handleButtonClickSimple }}></KolButton>
+				<KolButton _label="Show complex toast" _on={{ onClick: handleButtonClickComplex }}></KolButton>
+				<br />
+				<br />
+				<KolButton _label="Show toast and close after 2 seconds" _on={{ onClick: () => void handleButtonClickOpenAndClose() }}></KolButton>
+				<br />
+				<br />
+				<KolButton _label="Close all toasts" _on={{ onClick: closeAll }}></KolButton>
+			</div>
+		</>
 	);
 };

package/src/components/toast-legacy/basic.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { FC } from 'react';
-import { KolButton, KolToast } from '@public-ui/react';
+import { KolBadge, KolButton, KolToast } from '@public-ui/react';
 import { ToasterServiceLegacy } from '@public-ui/components';
+import { SampleDescription } from '../SampleDescription';
 
 export const ToastBasic: FC = () => {
 	const toaster = ToasterServiceLegacy.getInstance(document);
@@ -14,13 +15,21 @@ export const ToastBasic: FC = () => {
 		});
 	};
 	return (
-		<div>
-			<KolToast _label="Legacy Toast Titel">Toast content</KolToast>
-			<KolToast _label="Zweiter Toast mit Schließen-Button" _hasCloser>
-				Toast content
-			</KolToast>
+		<>
+			<SampleDescription>
+				<p>This sample shows the legacy KolToast component.</p>
+				<p>
+					<KolBadge _label="The component is deprecated and won't be available anymore in KoliBri version 3." _color="#db5461" />
+				</p>
+			</SampleDescription>
+			<div>
+				<KolToast _label="Legacy Toast Titel">Toast content</KolToast>
+				<KolToast _label="Zweiter Toast mit Schließen-Button" _hasCloser>
+					Toast content
+				</KolToast>
 
-			<KolButton _label="Weiteren Toast öffnen" _on={{ onClick: handleButtonClick }}></KolButton>
-		</div>
+				<KolButton _label="Weiteren Toast öffnen" _on={{ onClick: handleButtonClick }}></KolButton>
+			</div>
+		</>
 	);
 };

package/src/components/version/basic.tsx

@@ -2,5 +2,14 @@ import React from 'react';
 import { KolVersion } from '@public-ui/react';
 
 import { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
-export const VersionBasic: FC = () => <KolVersion _version="1.1.1" />;
+export const VersionBasic: FC = () => (
+	<>
+		<SampleDescription>
+			<p>KolVersion renders a label showing the given version number.</p>
+		</SampleDescription>
+
+		<KolVersion _label="1.1.1" />
+	</>
+);

package/src/components/version/context.tsx

@@ -2,11 +2,18 @@ import React from 'react';
 import { KolVersion } from '@public-ui/react';
 
 import { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const VersionContext: FC = () => (
-	<p>
-		<KolVersion _version="1.0.0" /> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
-		aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
-		ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
-	</p>
+	<>
+		<SampleDescription>
+			<p>This sample shows KolVersion inline with text paragraph content.</p>
+		</SampleDescription>
+
+		<p>
+			<KolVersion _label="1.0.0" /> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
+			aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
+			ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
+		</p>
+	</>
 );

package/src/react.main.tsx

@@ -50,7 +50,7 @@ void (async () => {
 							detect: 'auto',
 						},
 				translation: {
-					name: 'de',
+					name: 'en',
 				},
 				transformTagName: ENABLE_TAG_NAME_TRANSFORMER ? tagNameTransformer : undefined,
 			},

package/src/scenarios/appointment-form/AppointmentForm.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { KolTabs } from '@public-ui/react';
+import { KolLink, KolTabs } from '@public-ui/react';
 import { DistrictForm } from './DistrictForm';
 import { Summary } from './Summary';
 import { PersonalInformationForm } from './PersonalInformationForm';
@@ -8,6 +8,7 @@ import * as Yup from 'yup';
 import { AvailableAppointmentsForm } from './AvailableAppointmentsForm';
 import { Iso8601 } from '@public-ui/components';
 import { checkAppointmentAvailability } from './appointmentService';
+import { SampleDescription } from '../../components/SampleDescription';
 
 // export interface FormProps {}
 export interface FormValues {
@@ -86,47 +87,56 @@ export function AppointmentForm() {
 	};
 
 	return (
-		<Formik<FormValues> innerRef={formikRef} initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit}>
-			<KolTabs
-				_tabs={[
-					{
-						_label: '1. Einwohnermeldeamt wählen',
-					},
-					{
-						_label: '2. Freie Termine',
-						_disabled: activeFormSection < FormSection.AVAILABLE_APPOINTMENTS,
-					},
-					{
-						_label: '3. Persönliche Daten',
-						_disabled: activeFormSection < FormSection.PERSONAL_INFORMATION,
-					},
-					{
-						_label: 'Zusammenfassung',
-						_disabled: activeFormSection < FormSection.SUMMARY,
-					},
-				]}
-				_label="Formular-Navigation"
-				_selected={selectedTab}
-				_on={{
-					onSelect: (_event, selectedTab) => {
-						setActiveFormSection(selectedTab);
-						formikRef.current?.setErrors({});
-					},
-				}}
-			>
-				<div>
-					<DistrictForm />
-				</div>
-				<div>
-					<AvailableAppointmentsForm />
-				</div>
-				<div>
-					<PersonalInformationForm />
-				</div>
-				<div>
-					<Summary />
-				</div>
-			</KolTabs>
-		</Formik>
+		<>
+			<SampleDescription>
+				<p>
+					The Appointment Form is a full form example featuring a large variety of KoliBri form components,{' '}
+					<KolLink _label="Formik" _href="https://formik.org/" _target="blank" /> and{' '}
+					<KolLink _label="Yup" _href="https://github.com/jquense/yup" _target="blank" />.
+				</p>
+			</SampleDescription>
+			<Formik<FormValues> innerRef={formikRef} initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit}>
+				<KolTabs
+					_tabs={[
+						{
+							_label: '1. Einwohnermeldeamt wählen',
+						},
+						{
+							_label: '2. Freie Termine',
+							_disabled: activeFormSection < FormSection.AVAILABLE_APPOINTMENTS,
+						},
+						{
+							_label: '3. Persönliche Daten',
+							_disabled: activeFormSection < FormSection.PERSONAL_INFORMATION,
+						},
+						{
+							_label: 'Zusammenfassung',
+							_disabled: activeFormSection < FormSection.SUMMARY,
+						},
+					]}
+					_label="Formular-Navigation"
+					_selected={selectedTab}
+					_on={{
+						onSelect: (_event, selectedTab) => {
+							setActiveFormSection(selectedTab);
+							formikRef.current?.setErrors({});
+						},
+					}}
+				>
+					<div>
+						<DistrictForm />
+					</div>
+					<div>
+						<AvailableAppointmentsForm />
+					</div>
+					<div>
+						<PersonalInformationForm />
+					</div>
+					<div>
+						<Summary />
+					</div>
+				</KolTabs>
+			</Formik>
+		</>
 	);
 }

package/src/scenarios/custom-tooltip-width.tsx

@@ -1,6 +1,15 @@
 import React, { FC } from 'react';
 import { KolButton } from '@public-ui/react';
+import { SampleDescription } from '../components/SampleDescription';
 
 export const CustomTooltipWidth: FC = () => (
-	<KolButton _label="Tooltip mit fixer Breite" _hideLabel style={{ '--kol-tooltip-width': '400px' }} _icons="codicon codicon-reactions"></KolButton>
+	<>
+		<SampleDescription>
+			<p>
+				This sample demonstrates how a tooltip&apos;s width can be adjusted by defining the CSS custom property <code>--kol-tooltip-width</code> on one of the
+				parent elements.
+			</p>
+		</SampleDescription>
+		<KolButton _label="Tooltip mit fixer Breite" _hideLabel style={{ '--kol-tooltip-width': '400px' }} _icons="codicon codicon-reactions"></KolButton>
+	</>
 );

package/src/scenarios/static-form.tsx

@@ -23,7 +23,7 @@ export const StaticForm: FC = () => {
 	return (
 		<>
 			<SampleDescription>
-				<p>This sample shows how you can use KoliBri in static form context, too.</p>
+				<p>This sample shows how KoliBri can be used in a static form context.</p>
 				<ol>
 					<li>
 						First you have to enable the <code>experimental mode</code>:{' '}

package/src/shares/constants.ts

@@ -1,2 +1,3 @@
+export const PUBLIC_DOC_COMPONENT_URL = 'https://public-ui.github.io/docs/1.7/components';
 export const ERROR_MSG = 'Ich bin eine Fehlermeldung!';
 export const HINT_MSG = 'Ich bin ein Hinweis.';

package/dist/3454.js

@@ -1,2 +0,0 @@
-/*! For license information please see 3454.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[3454],{3454:(i,e,n)=>{n.r(e),n.d(e,{kol_span:()=>o});var t=n(1418),a=n(173);const o=class{constructor(i){(0,t.r)(this,i),this._hideLabel=!1,this._icon=void 0,this._icons=void 0,this._iconOnly=void 0,this._label=void 0}render(){return(0,t.h)(a.g,{key:"a788b90468806bfe35b375f4945987213af57c7b",_icons:this._icons||this._icon,_hideLabel:this._hideLabel,_label:this._label,class:"kol-span"},(0,t.h)("slot",{key:"81012eadd30eb01ef5f1807237303484ffbb1e34",name:"expert",slot:"expert"}))}};o.style={default:":host{--a11y-min-size:44px;background-color:white;color:black;font-family:Verdana}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role=button],button:not([role=link]),.kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}:host{max-width:100%}*{box-sizing:border-box}.kol-span-wc{display:grid;place-items:center}.kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}.icon-only>.kol-span-wc>span>span{display:none}.hidden{display:none;visibility:hidden}"}}}]);

package/dist/4689.js

@@ -1,2 +0,0 @@
-/*! For license information please see 4689.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[4689],{45:(t,e,n)=>{n.d(e,{v:()=>i});var o=n(3134);const i=(t,e)=>{(0,o.v)(t,"_align",e)}},3134:(t,e,n)=>{n.d(e,{v:()=>r});var o=n(2214);const i=new Set([...new Set(['"left", "right"']),...new Set(['"bottom", "top"'])]),r=(t,e,n)=>{(0,o.w)(t,e,(t=>"bottom"===t||"left"===t||"right"===t||"top"===t),i,n,{defaultValue:"top"})}},6133:(t,e,n)=>{n.d(e,{a:()=>yt,b:()=>mt,c:()=>xt,f:()=>gt,o:()=>pt,s:()=>ht});var o=Object.defineProperty,i=Object.defineProperties,r=Object.getOwnPropertyDescriptors,l=Object.getOwnPropertySymbols,c=Object.prototype.hasOwnProperty,s=Object.prototype.propertyIsEnumerable,f=(t,e,n)=>e in t?o(t,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[e]=n,a=(t,e)=>{for(var n in e||(e={}))c.call(e,n)&&f(t,n,e[n]);if(l)for(var n of l(e))s.call(e,n)&&f(t,n,e[n]);return t},u=(t,e)=>i(t,r(e)),d=(t,e)=>{var n={};for(var o in t)c.call(t,o)&&e.indexOf(o)<0&&(n[o]=t[o]);if(null!=t&&l)for(var o of l(t))e.indexOf(o)<0&&s.call(t,o)&&(n[o]=t[o]);return n},m=(t,e,n)=>new Promise(((o,i)=>{var r=t=>{try{c(n.next(t))}catch(t){i(t)}},l=t=>{try{c(n.throw(t))}catch(t){i(t)}},c=t=>t.done?o(t.value):Promise.resolve(t.value).then(r,l);c((n=n.apply(t,e)).next())}));const p=Math.min,h=Math.max,g=Math.round,y=Math.floor,x=t=>({x:t,y:t}),v={left:"right",right:"left",bottom:"top",top:"bottom"},w={start:"end",end:"start"};function b(t,e,n){return h(t,p(e,n))}function R(t,e){return"function"==typeof t?t(e):t}function E(t){return t.split("-")[0]}function O(t){return t.split("-")[1]}function T(t){return"x"===t?"y":"x"}function L(t){return"y"===t?"height":"width"}function A(t){return["top","bottom"].includes(E(t))?"y":"x"}function P(t){return T(A(t))}function S(t){return t.replace(/start|end/g,(t=>w[t]))}function D(t){return t.replace(/left|right|bottom|top/g,(t=>v[t]))}function k(t){return"number"!=typeof t?function(t){return a({top:0,right:0,bottom:0,left:0},t)}(t):{top:t,right:t,bottom:t,left:t}}function C(t){const{x:e,y:n,width:o,height:i}=t;return{width:o,height:i,top:n,left:e,right:e+o,bottom:n+i,x:e,y:n}}function F(t,e,n){let{reference:o,floating:i}=t;const r=A(e),l=P(e),c=L(l),s=E(e),f="y"===r,a=o.x+o.width/2-i.width/2,u=o.y+o.height/2-i.height/2,d=o[c]/2-i[c]/2;let m;switch(s){case"top":m={x:a,y:o.y-i.height};break;case"bottom":m={x:a,y:o.y+o.height};break;case"right":m={x:o.x+o.width,y:u};break;case"left":m={x:o.x-i.width,y:u};break;default:m={x:o.x,y:o.y}}switch(O(e)){case"start":m[l]-=d*(n&&f?-1:1);break;case"end":m[l]+=d*(n&&f?-1:1)}return m}function H(t,e){return m(this,null,(function*(){var n;void 0===e&&(e={});const{x:o,y:i,platform:r,rects:l,elements:c,strategy:s}=t,{boundary:f="clippingAncestors",rootBoundary:d="viewport",elementContext:m="floating",altBoundary:p=!1,padding:h=0}=R(e,t),g=k(h),y=c[p?"floating"===m?"reference":"floating":m],x=C(yield r.getClippingRect({element:null==(n=yield null==r.isElement?void 0:r.isElement(y))||n?y:y.contextElement||(yield null==r.getDocumentElement?void 0:r.getDocumentElement(c.floating)),boundary:f,rootBoundary:d,strategy:s})),v="floating"===m?u(a({},l.floating),{x:o,y:i}):l.reference,w=yield null==r.getOffsetParent?void 0:r.getOffsetParent(c.floating),b=(yield null==r.isElement?void 0:r.isElement(w))&&(yield null==r.getScale?void 0:r.getScale(w))||{x:1,y:1},E=C(r.convertOffsetParentRelativeRectToViewportRelativeRect?yield r.convertOffsetParentRelativeRectToViewportRelativeRect({elements:c,rect:v,offsetParent:w,strategy:s}):v);return{top:(x.top-E.top+g.top)/b.y,bottom:(E.bottom-x.bottom+g.bottom)/b.y,left:(x.left-E.left+g.left)/b.x,right:(E.right-x.right+g.right)/b.x}}))}function W(t){return B(t)?(t.nodeName||"").toLowerCase():"#document"}function _(t){var e;return(null==t||null==(e=t.ownerDocument)?void 0:e.defaultView)||window}function V(t){var e;return null==(e=(B(t)?t.ownerDocument:t.document)||window.document)?void 0:e.documentElement}function B(t){return t instanceof Node||t instanceof _(t).Node}function M(t){return t instanceof Element||t instanceof _(t).Element}function j(t){return t instanceof HTMLElement||t instanceof _(t).HTMLElement}function z(t){return"undefined"!=typeof ShadowRoot&&(t instanceof ShadowRoot||t instanceof _(t).ShadowRoot)}function N(t){const{overflow:e,overflowX:n,overflowY:o,display:i}=G(t);return/auto|scroll|overlay|hidden|clip/.test(e+o+n)&&!["inline","contents"].includes(i)}function I(t){return["table","td","th"].includes(W(t))}function q(t){return[":popover-open",":modal"].some((e=>{try{return t.matches(e)}catch(t){return!1}}))}function X(t){const e=Y(),n=G(t);return"none"!==n.transform||"none"!==n.perspective||!!n.containerType&&"normal"!==n.containerType||!e&&!!n.backdropFilter&&"none"!==n.backdropFilter||!e&&!!n.filter&&"none"!==n.filter||["transform","perspective","filter"].some((t=>(n.willChange||"").includes(t)))||["paint","layout","strict","content"].some((t=>(n.contain||"").includes(t)))}function Y(){return!("undefined"==typeof CSS||!CSS.supports)&&CSS.supports("-webkit-backdrop-filter","none")}function $(t){return["html","body","#document"].includes(W(t))}function G(t){return _(t).getComputedStyle(t)}function J(t){return M(t)?{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}:{scrollLeft:t.pageXOffset,scrollTop:t.pageYOffset}}function K(t){if("html"===W(t))return t;const e=t.assignedSlot||t.parentNode||z(t)&&t.host||V(t);return z(e)?e.host:e}function Q(t){const e=K(t);return $(e)?t.ownerDocument?t.ownerDocument.body:t.body:j(e)&&N(e)?e:Q(e)}function U(t,e,n){var o;void 0===e&&(e=[]),void 0===n&&(n=!0);const i=Q(t),r=i===(null==(o=t.ownerDocument)?void 0:o.body),l=_(i);return r?e.concat(l,l.visualViewport||[],N(i)?i:[],l.frameElement&&n?U(l.frameElement):[]):e.concat(i,U(i,[],n))}function Z(t){const e=G(t);let n=parseFloat(e.width)||0,o=parseFloat(e.height)||0;const i=j(t),r=i?t.offsetWidth:n,l=i?t.offsetHeight:o,c=g(n)!==r||g(o)!==l;return c&&(n=r,o=l),{width:n,height:o,$:c}}function tt(t){return M(t)?t:t.contextElement}function et(t){const e=tt(t);if(!j(e))return x(1);const n=e.getBoundingClientRect(),{width:o,height:i,$:r}=Z(e);let l=(r?g(n.width):n.width)/o,c=(r?g(n.height):n.height)/i;return l&&Number.isFinite(l)||(l=1),c&&Number.isFinite(c)||(c=1),{x:l,y:c}}const nt=x(0);function ot(t){const e=_(t);return Y()&&e.visualViewport?{x:e.visualViewport.offsetLeft,y:e.visualViewport.offsetTop}:nt}function it(t,e,n,o){void 0===e&&(e=!1),void 0===n&&(n=!1);const i=t.getBoundingClientRect(),r=tt(t);let l=x(1);e&&(o?M(o)&&(l=et(o)):l=et(t));const c=function(t,e,n){return void 0===e&&(e=!1),!(!n||e&&n!==_(t))&&e}(r,n,o)?ot(r):x(0);let s=(i.left+c.x)/l.x,f=(i.top+c.y)/l.y,a=i.width/l.x,u=i.height/l.y;if(r){const t=_(r),e=o&&M(o)?_(o):o;let n=t,i=n.frameElement;for(;i&&o&&e!==n;){const t=et(i),e=i.getBoundingClientRect(),o=G(i),r=e.left+(i.clientLeft+parseFloat(o.paddingLeft))*t.x,l=e.top+(i.clientTop+parseFloat(o.paddingTop))*t.y;s*=t.x,f*=t.y,a*=t.x,u*=t.y,s+=r,f+=l,n=_(i),i=n.frameElement}}return C({width:a,height:u,x:s,y:f})}function rt(t){return it(V(t)).left+J(t).scrollLeft}function lt(t,e,n){let o;if("viewport"===e)o=function(t,e){const n=_(t),o=V(t),i=n.visualViewport;let r=o.clientWidth,l=o.clientHeight,c=0,s=0;if(i){r=i.width,l=i.height;const t=Y();(!t||t&&"fixed"===e)&&(c=i.offsetLeft,s=i.offsetTop)}return{width:r,height:l,x:c,y:s}}(t,n);else if("document"===e)o=function(t){const e=V(t),n=J(t),o=t.ownerDocument.body,i=h(e.scrollWidth,e.clientWidth,o.scrollWidth,o.clientWidth),r=h(e.scrollHeight,e.clientHeight,o.scrollHeight,o.clientHeight);let l=-n.scrollLeft+rt(t);const c=-n.scrollTop;return"rtl"===G(o).direction&&(l+=h(e.clientWidth,o.clientWidth)-i),{width:i,height:r,x:l,y:c}}(V(t));else if(M(e))o=function(t,e){const n=it(t,!0,"fixed"===e),o=n.top+t.clientTop,i=n.left+t.clientLeft,r=j(t)?et(t):x(1);return{width:t.clientWidth*r.x,height:t.clientHeight*r.y,x:i*r.x,y:o*r.y}}(e,n);else{const n=ot(t);o=u(a({},e),{x:e.x-n.x,y:e.y-n.y})}return C(o)}function ct(t,e){const n=K(t);return!(n===e||!M(n)||$(n))&&("fixed"===G(n).position||ct(n,e))}function st(t,e,n){const o=j(e),i=V(e),r="fixed"===n,l=it(t,!0,r,e);let c={scrollLeft:0,scrollTop:0};const s=x(0);if(o||!o&&!r)if(("body"!==W(e)||N(i))&&(c=J(e)),o){const t=it(e,!0,r,e);s.x=t.x+e.clientLeft,s.y=t.y+e.clientTop}else i&&(s.x=rt(i));return{x:l.left+c.scrollLeft-s.x,y:l.top+c.scrollTop-s.y,width:l.width,height:l.height}}function ft(t){return"static"===G(t).position}function at(t,e){return j(t)&&"fixed"!==G(t).position?e?e(t):t.offsetParent:null}function ut(t,e){const n=_(t);if(q(t))return n;if(!j(t)){let e=K(t);for(;e&&!$(e);){if(M(e)&&!ft(e))return e;e=K(e)}return n}let o=at(t,e);for(;o&&I(o)&&ft(o);)o=at(o,e);return o&&$(o)&&ft(o)&&!X(o)?n:o||function(t){let e=K(t);for(;j(e)&&!$(e);){if(q(e))return null;if(X(e))return e;e=K(e)}return null}(t)||n}const dt={convertOffsetParentRelativeRectToViewportRelativeRect:function(t){let{elements:e,rect:n,offsetParent:o,strategy:i}=t;const r="fixed"===i,l=V(o),c=!!e&&q(e.floating);if(o===l||c&&r)return n;let s={scrollLeft:0,scrollTop:0},f=x(1);const a=x(0),u=j(o);if((u||!u&&!r)&&(("body"!==W(o)||N(l))&&(s=J(o)),j(o))){const t=it(o);f=et(o),a.x=t.x+o.clientLeft,a.y=t.y+o.clientTop}return{width:n.width*f.x,height:n.height*f.y,x:n.x*f.x-s.scrollLeft*f.x+a.x,y:n.y*f.y-s.scrollTop*f.y+a.y}},getDocumentElement:V,getClippingRect:function(t){let{element:e,boundary:n,rootBoundary:o,strategy:i}=t;const r=[..."clippingAncestors"===n?q(e)?[]:function(t,e){const n=e.get(t);if(n)return n;let o=U(t,[],!1).filter((t=>M(t)&&"body"!==W(t))),i=null;const r="fixed"===G(t).position;let l=r?K(t):t;for(;M(l)&&!$(l);){const e=G(l),n=X(l);n||"fixed"!==e.position||(i=null),(r?!n&&!i:!n&&"static"===e.position&&i&&["absolute","fixed"].includes(i.position)||N(l)&&!n&&ct(t,l))?o=o.filter((t=>t!==l)):i=e,l=K(l)}return e.set(t,o),o}(e,this._c):[].concat(n),o],l=r[0],c=r.reduce(((t,n)=>{const o=lt(e,n,i);return t.top=h(o.top,t.top),t.right=p(o.right,t.right),t.bottom=p(o.bottom,t.bottom),t.left=h(o.left,t.left),t}),lt(e,l,i));return{width:c.right-c.left,height:c.bottom-c.top,x:c.left,y:c.top}},getOffsetParent:ut,getElementRects:function(t){return m(this,null,(function*(){const e=this.getOffsetParent||ut,n=this.getDimensions,o=yield n(t.floating);return{reference:st(t.reference,yield e(t.floating),t.strategy),floating:{x:0,y:0,width:o.width,height:o.height}}}))},getClientRects:function(t){return Array.from(t.getClientRects())},getDimensions:function(t){const{width:e,height:n}=Z(t);return{width:e,height:n}},getScale:et,isElement:M,isRTL:function(t){return"rtl"===G(t).direction}};function mt(t,e,n,o){void 0===o&&(o={});const{ancestorScroll:i=!0,ancestorResize:r=!0,elementResize:l="function"==typeof ResizeObserver,layoutShift:c="function"==typeof IntersectionObserver,animationFrame:s=!1}=o,f=tt(t),d=i||r?[...f?U(f):[],...U(e)]:[];d.forEach((t=>{i&&t.addEventListener("scroll",n,{passive:!0}),r&&t.addEventListener("resize",n)}));const m=f&&c?function(t,e){let n,o=null;const i=V(t);function r(){var t;clearTimeout(n),null==(t=o)||t.disconnect(),o=null}return function l(c,s){void 0===c&&(c=!1),void 0===s&&(s=1),r();const{left:f,top:d,width:m,height:g}=t.getBoundingClientRect();if(c||e(),!m||!g)return;const x={rootMargin:-y(d)+"px "+-y(i.clientWidth-(f+m))+"px "+-y(i.clientHeight-(d+g))+"px "+-y(f)+"px",threshold:h(0,p(1,s))||1};let v=!0;function w(t){const e=t[0].intersectionRatio;if(e!==s){if(!v)return l();e?l(!1,e):n=setTimeout((()=>{l(!1,1e-7)}),1e3)}v=!1}try{o=new IntersectionObserver(w,u(a({},x),{root:i.ownerDocument}))}catch(t){o=new IntersectionObserver(w,x)}o.observe(t)}(!0),r}(f,n):null;let g,x=-1,v=null;l&&(v=new ResizeObserver((t=>{let[o]=t;o&&o.target===f&&v&&(v.unobserve(e),cancelAnimationFrame(x),x=requestAnimationFrame((()=>{var t;null==(t=v)||t.observe(e)}))),n()})),f&&!s&&v.observe(f),v.observe(e));let w=s?it(t):null;return s&&function e(){const o=it(t);!w||o.x===w.x&&o.y===w.y&&o.width===w.width&&o.height===w.height||n(),w=o,g=requestAnimationFrame(e)}(),n(),()=>{var t;d.forEach((t=>{i&&t.removeEventListener("scroll",n),r&&t.removeEventListener("resize",n)})),null==m||m(),null==(t=v)||t.disconnect(),v=null,s&&cancelAnimationFrame(g)}}const pt=function(t){return void 0===t&&(t=0),{name:"offset",options:t,fn(e){return m(this,null,(function*(){var n,o;const{x:i,y:r,placement:l,middlewareData:c}=e,s=yield function(t,e){return m(this,null,(function*(){const{placement:n,platform:o,elements:i}=t,r=yield null==o.isRTL?void 0:o.isRTL(i.floating),l=E(n),c=O(n),s="y"===A(n),f=["left","top"].includes(l)?-1:1,u=r&&s?-1:1,d=R(e,t);let{mainAxis:m,crossAxis:p,alignmentAxis:h}="number"==typeof d?{mainAxis:d,crossAxis:0,alignmentAxis:null}:a({mainAxis:0,crossAxis:0,alignmentAxis:null},d);return c&&"number"==typeof h&&(p="end"===c?-1*h:h),s?{x:p*u,y:m*f}:{x:m*f,y:p*u}}))}(e,t);return l===(null==(n=c.offset)?void 0:n.placement)&&null!=(o=c.arrow)&&o.alignmentOffset?{}:{x:i+s.x,y:r+s.y,data:u(a({},s),{placement:l})}}))}}},ht=function(t){return void 0===t&&(t={}),{name:"shift",options:t,fn(e){return m(this,null,(function*(){const{x:n,y:o,placement:i}=e,r=R(t,e),{mainAxis:l=!0,crossAxis:c=!1,limiter:s={fn:t=>{let{x:e,y:n}=t;return{x:e,y:n}}}}=r,f=d(r,["mainAxis","crossAxis","limiter"]),m={x:n,y:o},p=yield H(e,f),h=A(E(i)),g=T(h);let y=m[g],x=m[h];if(l){const t="y"===g?"bottom":"right";y=b(y+p["y"===g?"top":"left"],y,y-p[t])}if(c){const t="y"===h?"bottom":"right";x=b(x+p["y"===h?"top":"left"],x,x-p[t])}const v=s.fn(u(a({},e),{[g]:y,[h]:x}));return u(a({},v),{data:{x:v.x-n,y:v.y-o}})}))}}},gt=function(t){return void 0===t&&(t={}),{name:"flip",options:t,fn(e){return m(this,null,(function*(){var n,o;const{placement:i,middlewareData:r,rects:l,initialPlacement:c,platform:s,elements:f}=e,a=R(t,e),{mainAxis:u=!0,crossAxis:m=!0,fallbackPlacements:p,fallbackStrategy:h="bestFit",fallbackAxisSideDirection:g="none",flipAlignment:y=!0}=a,x=d(a,["mainAxis","crossAxis","fallbackPlacements","fallbackStrategy","fallbackAxisSideDirection","flipAlignment"]);if(null!=(n=r.arrow)&&n.alignmentOffset)return{};const v=E(i),w=E(c)===c,b=yield null==s.isRTL?void 0:s.isRTL(f.floating),T=p||(w||!y?[D(c)]:function(t){const e=D(t);return[S(t),e,S(e)]}(c));p||"none"===g||T.push(...function(t,e,n,o){const i=O(t);let r=function(t,e,n){const o=["left","right"],i=["right","left"],r=["top","bottom"],l=["bottom","top"];switch(t){case"top":case"bottom":return n?e?i:o:e?o:i;case"left":case"right":return e?r:l;default:return[]}}(E(t),"start"===n,o);return i&&(r=r.map((t=>t+"-"+i)),e&&(r=r.concat(r.map(S)))),r}(c,y,g,b));const A=[c,...T],k=yield H(e,x),C=[];let F=(null==(o=r.flip)?void 0:o.overflows)||[];if(u&&C.push(k[v]),m){const t=function(t,e,n){void 0===n&&(n=!1);const o=O(t),i=P(t),r=L(i);let l="x"===i?o===(n?"end":"start")?"right":"left":"start"===o?"bottom":"top";return e.reference[r]>e.floating[r]&&(l=D(l)),[l,D(l)]}(i,l,b);C.push(k[t[0]],k[t[1]])}if(F=[...F,{placement:i,overflows:C}],!C.every((t=>t<=0))){var W,_;const t=((null==(W=r.flip)?void 0:W.index)||0)+1,e=A[t];if(e)return{data:{index:t,overflows:F},reset:{placement:e}};let n=null==(_=F.filter((t=>t.overflows[0]<=0)).sort(((t,e)=>t.overflows[1]-e.overflows[1]))[0])?void 0:_.placement;if(!n)switch(h){case"bestFit":{var V;const t=null==(V=F.map((t=>[t.placement,t.overflows.filter((t=>t>0)).reduce(((t,e)=>t+e),0)])).sort(((t,e)=>t[1]-e[1]))[0])?void 0:V[0];t&&(n=t);break}case"initialPlacement":n=c}if(i!==n)return{reset:{placement:n}}}return{}}))}}},yt=t=>({name:"arrow",options:t,fn(e){return m(this,null,(function*(){const{x:n,y:o,placement:i,rects:r,platform:l,elements:c,middlewareData:s}=e,{element:f,padding:u=0}=R(t,e)||{};if(null==f)return{};const d=k(u),m={x:n,y:o},h=P(i),g=L(h),y=yield l.getDimensions(f),x="y"===h,v=x?"top":"left",w=x?"bottom":"right",E=x?"clientHeight":"clientWidth",T=r.reference[g]+r.reference[h]-m[h]-r.floating[g],A=m[h]-r.reference[h],S=yield null==l.getOffsetParent?void 0:l.getOffsetParent(f);let D=S?S[E]:0;D&&(yield null==l.isElement?void 0:l.isElement(S))||(D=c.floating[E]||r.floating[g]);const C=T/2-A/2,F=D/2-y[g]/2-1,H=p(d[v],F),W=p(d[w],F),_=H,V=D-y[g]-W,B=D/2-y[g]/2+C,M=b(_,B,V),j=!s.arrow&&null!=O(i)&&B!==M&&r.reference[g]/2-(B<_?H:W)-y[g]/2<0,z=j?B<_?B-_:B-V:0;return{[h]:m[h]+z,data:a({[h]:M,centerOffset:B-M-z},j&&{alignmentOffset:z}),reset:j}}))}}),xt=(t,e,n)=>{const o=new Map,i=a({platform:dt},n),r=u(a({},i.platform),{_c:o});return((t,e,n)=>m(void 0,null,(function*(){const{placement:o="bottom",strategy:i="absolute",middleware:r=[],platform:l}=n,c=r.filter(Boolean),s=yield null==l.isRTL?void 0:l.isRTL(e);let f=yield l.getElementRects({reference:t,floating:e,strategy:i}),{x:d,y:m}=F(f,o,s),p=o,h={},g=0;for(let n=0;n<c.length;n++){const{name:r,fn:y}=c[n],{x,y:v,data:w,reset:b}=yield y({x:d,y:m,initialPlacement:o,placement:p,strategy:i,middlewareData:h,rects:f,platform:l,elements:{reference:t,floating:e}});d=null!=x?x:d,m=null!=v?v:m,h=u(a({},h),{[r]:a(a({},h[r]),w)}),b&&g<=50&&(g++,"object"==typeof b&&(b.placement&&(p=b.placement),b.rects&&(f=!0===b.rects?yield l.getElementRects({reference:t,floating:e,strategy:i}):b.rects),({x:d,y:m}=F(f,p,s))),n=-1)}return{x:d,y:m,placement:p,strategy:i,middlewareData:h}})))(t,e,u(a({},i),{platform:r}))}}}]);

package/dist/9192.js

@@ -1,2 +0,0 @@
-/*! For license information please see 9192.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[9192],{508:(t,e,o)=>{o.d(e,{A:()=>a});var n=o(2214),i=o(2617),s=o(7302);class a{constructor(t,e,o){var n,a,r,c;if(this.experimentalMode=(0,s.a)(),this.setFormAssociatedValue=t=>{var e;const o=null===(e=this.formAssociated)||void 0===e?void 0:e.getAttribute("name");null!==o&&""!==o||(0,i.d)(` The form field (${this.type}) must have a name attribute to be form-associated. Please define the _name attribute.`);const n=this.tryToStringifyValue(t);this.syncValue(t,n,this.formAssociated),this.syncValue(t,n,this.syncToOwnInput)},this.component=t,this.host=this.findHostWithShadowRoot(o),this.type=e,this.experimentalMode&&("KOL-BUTTON"===(c=null===(n=this.host)||void 0===n?void 0:n.tagName)||"KOL-INPUT-CHECKBOX"===c||"KOL-INPUT-COLOR"===c||"KOL-INPUT-DATE"===c||"KOL-INPUT-EMAIL"===c||"KOL-INPUT-FILE"===c||"KOL-INPUT-NUMBER"===c||"KOL-INPUT-PASSWORD"===c||"KOL-INPUT-RADIO"===c||"KOL-INPUT-RANGE"===c||"KOL-INPUT-TEXT"===c||"KOL-SELECT"===c||"KOL-TEXTAREA"===c)){switch(null===(a=this.host)||void 0===a||a.querySelectorAll("input,select,textarea").forEach((t=>{var e;null===(e=this.host)||void 0===e||e.removeChild(t)})),this.type){case"button":case"color":case"date":case"email":case"file":case"number":case"password":case"radio":case"range":case"text":this.formAssociated=document.createElement("input"),this.formAssociated.setAttribute("type",this.type);break;case"select":this.formAssociated=document.createElement("select"),this.formAssociated.setAttribute("multiple","");break;case"textarea":this.formAssociated=document.createElement("textarea");break;default:this.formAssociated=document.createElement("input"),this.formAssociated.setAttribute("type","hidden")}this.formAssociated.setAttribute("aria-hidden","true"),this.formAssociated.setAttribute("data-form-associated",""),this.formAssociated.setAttribute("hidden",""),null===(r=this.host)||void 0===r||r.appendChild(this.formAssociated)}}findHostWithShadowRoot(t){for(;null===(null==t?void 0:t.shadowRoot)&&t!==document.body;)(t=null==t?void 0:t.parentNode).host&&(t=t.host);return t}setAttribute(t,e,o){if(this.experimentalMode)try{if("boolean"!=typeof(o="object"==typeof o&&null!==o?JSON.stringify(o):o)&&"number"!=typeof o&&"string"!=typeof o)throw new Error("Invalid value type: "+typeof o);null==e||e.setAttribute(t,`${o}`)}catch(o){null==e||e.removeAttribute(t)}}tryToStringifyValue(t){try{return"object"==typeof t&&null!==t?JSON.stringify(t).toString():null==t?null:t.toString()}catch(t){return(0,i.h)(`The form field raw value is not able to stringify! ${t}`),""}}syncValue(t,e,o){if(o)switch(this.type){case"file":o.files=t;break;case"select":o.querySelectorAll("option").forEach((t=>{o.removeChild(t)})),Array.isArray(t)&&t.forEach((t=>{const e=this.tryToStringifyValue(t);if("string"==typeof e){const t=document.createElement("option");t.setAttribute("value",e),t.setAttribute("selected",""),o.appendChild(t)}}));break;default:"string"==typeof e?(o.setAttribute("value",e),o.value=e):(o.removeAttribute("value"),o.value="")}}validateName(t){((t,e,o)=>{(0,n.d)(t,"_name",e,o)})(this.component,t,{hooks:{afterPatch:()=>{this.setAttribute("name",this.formAssociated,this.component.state._name)}}}),void 0===t&&(0,i.d)("Ein Name am Eingabefeldern oder Schalter ist nicht zwingend erforderlich, kann aber für die Autocomplete-Funktion und für das statische Versenden des Eingabefeldes relevant sein.")}validateSyncValueBySelector(t){if(this.experimentalMode&&"string"==typeof t){const e=document.querySelector(t);e&&(this.syncToOwnInput=e)}}componentWillLoad(){this.validateName(this.component._name),this.validateSyncValueBySelector(this.component._syncValueBySelector)}}},6445:(t,e,o)=>{o.d(e,{I:()=>u,g:()=>h});var n=o(2214),i=o(5809),s=o(9166),a=o(2617),r=o(1197),c=o(752),l=o(508);const h=t=>{const e="string"==typeof t._error&&t._error.length>0&&!0===t._touched,o="string"==typeof t._hint&&t._hint.length>0,n=[];return!0===e&&n.push(`${t._id}-error`),!0===o&&n.push(`${t._id}-hint`),{hasError:e,hasHint:o,ariaDescribedBy:n}};class d extends l.A{constructor(t,e,o){super(t,e,o),this.component=t}validateAlert(t){(0,n.a)(this.component,"_alert",t)}validateTouched(t){((t,e)=>{(0,n.a)(t,"_touched",e)})(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateAlert(this.component._alert),this.validateTouched(this.component._touched)}}class u extends d{constructor(t,e,o){super(t,e,o),this.valueChangeListeners=[],this.onFacade={onBlur:this.onBlur.bind(this),onChange:this.onChange.bind(this),onClick:this.onClick.bind(this),onFocus:this.onFocus.bind(this),onInput:this.onInput.bind(this)},this.component=t}validateAccessKey(t){(0,n.d)(this.component,"_accessKey",t)}validateAdjustHeight(t){((t,e)=>{(0,n.a)(t,"_adjustHeight",e)})(this.component,t)}validateDisabled(t){(0,n.a)(this.component,"_disabled",t),!0===t&&(0,a.g)()}validateError(t){(0,n.d)(this.component,"_error",t)}validateHideError(t){((t,e,o)=>{(0,n.a)(t,"_hideError",e,o)})(this.component,t,{hooks:{afterPatch:()=>{this.component.state._hideError&&(0,a.a)("Property hide-error for inputs: Only use when the error message is shown outside of the input component.")}}})}validateHideLabel(t){(0,i.v)(this.component,t,{hooks:{afterPatch:()=>{this.component.state._hideLabel&&(0,a.a)("Property hide-label for inputs: Only use for exceptions like search inputs that are clearly identifiable by their context.")}}})}validateHint(t){(0,n.d)(this.component,"_hint",t)}validateId(t){(0,n.d)(this.component,"_id",t,{hooks:{afterPatch:()=>{this.setAttribute("id",this.formAssociated,this.component.state._id)}},minLength:1}),""!==t&&void 0!==t||(0,a.d)("Eine eindeutige ID an den Eingabefeldern ist nicht zwingend erforderlich, könnte aber für die E2E-Tests relevant sein.")}validateLabel(t){(0,s.a)(this.component,t,{required:!0})}validateOn(t){"object"==typeof t&&(0,n.s)(this.component,"_on",t)}validateSmartButton(t){(0,n.o)(t,(()=>{try{t=(0,n.p)(t)}catch(t){}(0,n.s)(this.component,"_smartButton",t)}))}validateTabIndex(t){(0,c.v)(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateAccessKey(this.component._accessKey),this.validateAdjustHeight(this.component._adjustHeight),this.validateError(this.component._error),this.validateDisabled(this.component._disabled),this.validateHideError(this.component._hideError),this.validateHideLabel(this.component._hideLabel),this.validateHint(this.component._hint),this.validateId(this.component._id),this.validateLabel(this.component._label),this.validateSmartButton(this.component._smartButton),this.validateOn(this.component._on),this.validateTabIndex(this.component._tabIndex)}onBlur(t){var e;this.component._alert=!0,this.component._touched=!0,(0,r.s)(t),(0,r.t)("blur",this.host),"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onBlur)&&this.component._on.onBlur(t)}onChange(t,e){var o;e=null!=e?e:t.target.value,(0,r.t)("change",this.host,e),"function"==typeof(null===(o=this.component._on)||void 0===o?void 0:o.onChange)&&this.component._on.onChange(t,e),this.valueChangeListeners.forEach((t=>t(e)))}onClick(t){var e;(0,r.s)(t),(0,r.t)("click",this.host),"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onClick)&&this.component._on.onClick(t)}onFocus(t){var e;this.component._alert=!0,(0,r.s)(t),(0,r.t)("focus",this.host),"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onFocus)&&this.component._on.onFocus(t)}onInput(t,e=!0,o){var n;o=null!=o?o:t.target.value,(0,r.s)(t),(0,r.t)("input",this.host,o),e&&this.setFormAssociatedValue(o),"function"==typeof(null===(n=this.component._on)||void 0===n?void 0:n.onInput)&&this.component._on.onInput(t,o)}setValue(t,e){var o;this.setFormAssociatedValue(e),"function"==typeof(null===(o=this.component._on)||void 0===o?void 0:o.onChange)&&this.component._on.onChange(t,e)}addValueChangeListener(t){this.valueChangeListeners.push(t)}}},9192:(t,e,o)=>{o.d(e,{I:()=>c});var n=o(6236),i=o(2214),s=o(3206),a=o(6445);const r=(t,e)=>{const o=t;"object"==typeof o&&null!==o&&((0,s.i)(o.right,1)&&(o.right={icon:o.right}),(0,s.i)(o.left,1)&&(o.left={icon:o.left}),e.set("_icons",o))};class c extends a.I{constructor(t,e,o){super(t,e,o),this.component=t}validateIcon(t){this.validateIcons(t)}validateIcons(t){(0,i.o)(t,(()=>{try{t=(0,i.p)(t)}catch(t){}(0,i.w)(this.component,"_icons",(t=>"object"==typeof t&&null!==t&&((0,s.i)(t.left,1)||(0,n.i)(t.left)||(0,s.i)(t.right,1)||(0,n.i)(t.right))),new Set(["KoliBriHorizontalIcon"]),t,{hooks:{beforePatch:r},required:!0})}))}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons||this.component._icon)}}},1197:(t,e,o)=>{function n(t){t.stopImmediatePropagation(),t.stopPropagation()}function i(t,e,o){e&&function(t,e,o){const n=t.dispatchEvent(function(t,e){return new CustomEvent(`kol-${t}`,{bubbles:!0,cancelable:!0,composed:!0,detail:e})}(e,o))}(e,t,o)}o.d(e,{s:()=>n,t:()=>i})},5809:(t,e,o)=>{o.d(e,{v:()=>i});var n=o(2214);const i=(t,e,o={})=>{(0,n.a)(t,"_hideLabel",e,o)}},6236:(t,e,o)=>{o.d(e,{i:()=>r,v:()=>c,w:()=>l});var n=o(2214),i=o(3206);const s=(t,e,o)=>{(0,i.c)(o)?t[e]=o:(0,i.i)(o,1)&&(t[e]={icon:o})},a=t=>{var e,o,n;if(null===(e=t.nextState)||void 0===e?void 0:e.has("_icons")){const e=null===(o=t.nextState)||void 0===o?void 0:o.get("_icons");null===(n=t.nextState)||void 0===n||n.set("_icons",(t=>{let e={};return(0,i.i)(t,1)?e={left:{icon:t}}:"object"==typeof t&&null!==t&&(s(e,"top",t.top),s(e,"right",t.right),s(e,"bottom",t.bottom),s(e,"left",t.left)),e})(e))}},r=t=>"object"==typeof t&&null!==t&&(void 0===t.style||(0,i.b)(t.style))&&(0,i.i)(t.icon,1),c=(t,e,o={})=>{(0,n.o)(e,(()=>{var s;try{e=(0,n.p)(e)}catch(t){}(0,n.w)(t,"_icons",(t=>null===t||(0,i.i)(t,1)||"object"==typeof t&&null!==t&&((0,i.i)(t.left,1)||r(t.left)||(0,i.i)(t.right,1)||r(t.right)||(0,i.i)(t.top,1)||r(t.top)||(0,i.i)(t.bottom,1)||r(t.bottom))),new Set(["KoliBriIcon"]),e,Object.assign(Object.assign({},o),{defaultValue:{},hooks:{afterPatch:null===(s=o.hooks)||void 0===s?void 0:s.afterPatch,beforePatch:(t,e,n,i)=>{var s,r;"function"==typeof(null===(s=o.hooks)||void 0===s?void 0:s.beforePatch)&&(null===(r=o.hooks)||void 0===r||r.beforePatch(t,e,n,i)),a(n)}}}))}))},l=(t,e)=>{(0,n.w)(t,"_iconAlign",(t=>"left"===t||"right"===t),new Set(["Alignment {left, right, top, bottom}"]),e,{hooks:{beforePatch:()=>{a(t)}}})}},9166:(t,e,o)=>{o.d(e,{a:()=>d,c:()=>c,h:()=>r,v:()=>h});var n=o(2617),i=o(2214);const s=/[a-zA-Z0-9äöüÄÖÜß]/g,a=/^\d+$/;function r(t,e=1){return function(t){var e;return"string"==typeof t&&(null===(e=t.match(s))||void 0===e?void 0:e.length)||0}(t)>=e}function c(t){return a.test(t)}const l=new Set(["string"]),h=(t,e,o={})=>{(0,i.w)(t,"_label",(t=>"string"==typeof t),l,e,function(t){var e;return Object.assign(Object.assign({},t),{hooks:{afterPatch:(e,o,i,s)=>{var a,l;"function"==typeof(null===(a=t.hooks)||void 0===a?void 0:a.afterPatch)&&(null===(l=t.hooks)||void 0===l||l.afterPatch(e,o,i,s)),"string"==typeof e&&!1===r(e,3)&&!1===c(e)&&(0,n.a)(`The heading or label ("${e}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof e&&e.length>80&&(0,n.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(e=t.hooks)||void 0===e?void 0:e.beforePatch}})}(o))},d=h},752:(t,e,o)=>{o.d(e,{v:()=>a});var n=o(2617),i=o(2214);const s={hooks:{afterPatch:t=>{-1!==t&&0!==t&&(0,n.a)("Don’t Use Tabindex Greater than 0: https://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html")}}},a=(t,e)=>{(0,i.e)(t,"_tabIndex",e,s)}}}]);