@public-ui/sample-react 1.7.0-rc.16 → 1.7.0-rc.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "1.7.0-rc.16",
+  "version": "1.7.0-rc.17",
   "description": "This app contains samples for the KoliBri/Public UI",
   "license": "EUPL-1.2",
   "dependencies": {
@@ -8,14 +8,14 @@
     "@leanup/stack-react": "1.3.48",
     "@leanup/stack-webpack": "1.3.48",
     "@public-oss/kolibri-themes": "0.0.3",
-    "@public-ui/components": "1.7.0-rc.16",
-    "@public-ui/react": "1.7.0-rc.16",
-    "@public-ui/themes": "1.7.0-rc.16",
-    "@types/node": "20.6.5",
-    "@types/react": "18.2.22",
-    "@types/react-dom": "18.2.7",
-    "@unocss/preset-uno": "0.56.2",
-    "@unocss/webpack": "0.56.2",
+    "@public-ui/components": "1.7.0-rc.17",
+    "@public-ui/react": "1.7.0-rc.17",
+    "@public-ui/themes": "1.7.0-rc.17",
+    "@types/node": "20.7.1",
+    "@types/react": "18.2.23",
+    "@types/react-dom": "18.2.8",
+    "@unocss/preset-uno": "0.56.4",
+    "@unocss/webpack": "0.56.4",
     "ajv": "8.12.0",
     "chromedriver": "116.0.0",
     "cpy-cli": "5.0.0",

package/src/components/FocusInput.tsx

@@ -1,56 +1,20 @@
-import { KolButton, KolForm } from '@public-ui/react';
 import React, { FC, useLayoutEffect, useRef } from 'react';
-import { InputCheckboxVariants } from './input-checkbox/partials/variants';
-import { InputColorVariants } from './input-color/partials/variants';
-import { InputDateVariants } from './input-date/partials/variants';
-import { InputEmailVariants } from './input-email/partials/variants';
-import { InputFileVariants } from './input-file/partials/variants';
-import { InputNumberVariants } from './input-number/partials/variants';
-import { InputPasswordVariants } from './input-password/partials/variants';
-import { InputRadioVariants } from './input-radio/partials/variants';
-import { InputRangeVariants } from './input-range/partials/variants';
-import { InputTextVariants } from './input-text/partials/variants';
-import { SelectVariants } from './select/partials/variants';
-import { TextareaVariants } from './textarea/partials/variants';
+import { RefComponent } from './types';
 
-type Props = {
-	RefInput:
-		| typeof InputCheckboxVariants
-		| typeof InputColorVariants
-		| typeof InputDateVariants
-		| typeof InputEmailVariants
-		| typeof InputFileVariants
-		| typeof InputNumberVariants
-		| typeof InputPasswordVariants
-		| typeof InputRadioVariants
-		| typeof InputRangeVariants
-		| typeof InputTextVariants
-		| typeof SelectVariants
-		| typeof TextareaVariants;
-	props?: Record<string, unknown>;
-};
+type FokusElementProps = {
+	RefComponent: RefComponent;
+} & Record<string, unknown>;
 
-export const FocusInput: FC<Props> = ({ RefInput, props }) => {
+export const FocusElement: FC<FokusElementProps> = (props) => {
 	const ref = useRef(null);
 
 	useLayoutEffect(() => {
 		setTimeout(() => {
-			if (ref.current) {
+			if (ref.current && window.self === window.top) {
 				(ref.current as unknown as HTMLElement).focus();
 			}
 		}, 500);
 	}, [ref]);
 
-	return (
-		<KolForm>
-			<div className="grid gap-4">
-				<RefInput ref={ref} {...props} />
-				<div className="flex gap-4">
-					<KolButton _label="Submit" _icons="codicon codicon-arrow-right" _type="submit" _variant="primary" />
-					<KolButton _label="Reset" _type="reset" _variant="tertiary" />
-					<KolButton _label="Help" _type="button" _variant="ghost" />
-				</div>
-			</div>
-		</KolForm>
-	);
+	return <props.RefComponent ref={ref} {...props} />;
 };

package/src/components/FormWrap.tsx

@@ -0,0 +1,21 @@
+import { KolButton, KolForm } from '@public-ui/react';
+import React, { FC } from 'react';
+import { FocusElement } from './FocusInput';
+import { RefFormComponent } from './types';
+
+type FormWrapProps = {
+	RefComponent: RefFormComponent;
+} & Record<string, unknown>;
+
+export const FormWrap: FC<FormWrapProps> = (props) => (
+	<KolForm>
+		<div className="grid gap-4">
+			<FocusElement {...props} />
+			<div className="flex gap-4">
+				<KolButton _label="Submit" _icons="codicon codicon-arrow-right" _type="submit" _variant="primary" />
+				<KolButton _label="Reset" _type="reset" _variant="tertiary" />
+				<KolButton _label="Help" _type="button" _variant="ghost" />
+			</div>
+		</div>
+	</KolForm>
+);

package/src/components/button/basic.tsx

@@ -1,29 +1,5 @@
-import React from 'react';
-import { KolButton } from '@public-ui/react';
+import React, { FC } from 'react';
+import { FocusElement } from '../FocusInput';
+import { ButtonVariants } from './partials/variants';
 
-import { FC } from 'react';
-
-const ARGS = {
-	_on: {
-		onClick: (_event, _value) => alert('Klick!'),
-	},
-};
-
-export const ButtonBasic: FC = () => (
-	<div className="grid gap-14">
-		<div className="flex flex-wrap gap-14">
-			<KolButton _label="Primary" _variant="primary" {...ARGS}></KolButton>
-			<KolButton _label="Secondary" _variant="secondary" {...ARGS}></KolButton>
-			<KolButton _label="Normal" _variant="normal" {...ARGS}></KolButton>
-			<KolButton _label="Danger" _variant="danger" {...ARGS}></KolButton>
-			<KolButton _label="Ghost" _variant="ghost" {...ARGS}></KolButton>
-		</div>
-		<div className="flex flex-wrap gap-14">
-			<KolButton _disabled _label="Primary" _variant="primary"></KolButton>
-			<KolButton _disabled _label="Secondary" _variant="secondary"></KolButton>
-			<KolButton _disabled _label="Normal" _variant="normal"></KolButton>
-			<KolButton _disabled _label="Danger" _variant="danger"></KolButton>
-			<KolButton _disabled _label="Ghost" _variant="ghost"></KolButton>
-		</div>
-	</div>
-);
+export const ButtonBasic: FC = () => <FocusElement RefComponent={ButtonVariants} />;

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

@@ -0,0 +1,16 @@
+import { Components } from '@public-ui/components';
+import { KolButton } from '@public-ui/react';
+import React, { forwardRef } from 'react';
+
+export const ButtonCases = forwardRef<HTMLKolButtonElement, Components.KolButton>(function InputCheckboxCases(props, ref) {
+	return (
+		<div className="flex flex-wrap gap-4">
+			<KolButton {...props} _icons="codicon codicon-home" _label="Primary" _variant="primary"></KolButton>
+			<KolButton {...props} _icons="codicon codicon-heart" _label="Secondary" _variant="secondary"></KolButton>
+			<KolButton {...props} _icons="codicon codicon-hubot" _label="Normal" _variant="normal"></KolButton>
+			<KolButton {...props} _icons="codicon codicon-hubot" _label="Tertiary" _variant="tertiary"></KolButton>
+			<KolButton {...props} _icons="codicon codicon-trash" _label="Danger" _variant="danger"></KolButton>
+			<KolButton ref={ref} {...props} _icons="codicon codicon-reactions" _label="Ghost" _variant="ghost"></KolButton>
+		</div>
+	);
+});

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

@@ -0,0 +1,27 @@
+import { Components } from '@public-ui/components';
+import React, { forwardRef } from 'react';
+import { ButtonCases } from './cases';
+
+export const ButtonVariants = forwardRef<HTMLKolButtonElement, Components.KolButton>(function InputCheckboxVariant(props, ref) {
+	return (
+		<div className="grid gap-4">
+			<h1>Button</h1>
+			<section>
+				<h2>Button</h2>
+				<ButtonCases {...props} />
+			</section>
+			<section>
+				<h2>Button (disabled)</h2>
+				<ButtonCases {...props} _disabled />
+			</section>
+			<section>
+				<h2>Button (hideLabel)</h2>
+				<ButtonCases ref={ref} {...props} _hideLabel />
+			</section>
+			<section>
+				<h2>Button (disabled, hideLabel)</h2>
+				<ButtonCases {...props} _disabled _hideLabel />
+			</section>
+		</div>
+	);
+});

package/src/components/heading/badged.tsx

@@ -6,22 +6,22 @@ import { FC } from 'react';
 export const HeadingBadged: FC = () => (
 	<div className="grid gap-4">
 		<KolHeading _label="" _level={1}>
-			Eine Überschrift mit einem <KolBadge _color="red" _label="Label"></KolBadge>
+			Eine Überschrift mit einem <KolBadge _color="#f00" _label="Label"></KolBadge>
 		</KolHeading>
 		<KolHeading _label="" _level={2}>
-			Eine Überschrift mit einem <KolBadge _color="green" _label="Label"></KolBadge>
+			Eine Überschrift mit einem <KolBadge _color="#0f0" _label="Label"></KolBadge>
 		</KolHeading>
 		<KolHeading _label="" _level={3}>
-			Eine Überschrift mit einem <KolBadge _color="blue" _label="Label"></KolBadge>
+			Eine Überschrift mit einem <KolBadge _color="#00f" _label="Label"></KolBadge>
 		</KolHeading>
 		<KolHeading _label="" _level={4}>
-			Eine Überschrift mit einem <KolBadge _color="purple" _label="Label"></KolBadge>
+			Eine Überschrift mit einem <KolBadge _color="#800080" _label="Label"></KolBadge>
 		</KolHeading>
 		<KolHeading _label="" _level={5}>
-			Eine Überschrift mit einem <KolBadge _color="yellow" _label="Label"></KolBadge>
+			Eine Überschrift mit einem <KolBadge _color="#ff0" _label="Label"></KolBadge>
 		</KolHeading>
 		<KolHeading _label="" _level={6}>
-			Eine Überschrift mit einem <KolBadge _color="pink" _label="Label"></KolBadge>
+			Eine Überschrift mit einem <KolBadge _color="#ffc0cb" _label="Label"></KolBadge>
 		</KolHeading>
 	</div>
 );

package/src/components/input-checkbox/basic.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
+import { FormWrap } from '../FormWrap';
 import { InputCheckboxVariants } from './partials/variants';
-import { FocusInput } from '../FocusInput';
 
-export const InputCheckboxBasic: FC = () => <FocusInput RefInput={InputCheckboxVariants} />;
+export const InputCheckboxBasic: FC = () => <FormWrap RefComponent={InputCheckboxVariants} />;

package/src/components/input-checkbox/button.tsx

@@ -1,12 +1,5 @@
 import React, { FC } from 'react';
-import { FocusInput } from '../FocusInput';
+import { FormWrap } from '../FormWrap';
 import { InputCheckboxVariants } from './partials/variants';
 
-export const InputCheckboxButton: FC = () => (
-	<FocusInput
-		RefInput={InputCheckboxVariants}
-		props={{
-			_variant: 'button',
-		}}
-	/>
-);
+export const InputCheckboxButton: FC = () => <FormWrap RefComponent={InputCheckboxVariants} _variant="button" />;

package/src/components/input-checkbox/switch.tsx

@@ -1,12 +1,5 @@
 import React, { FC } from 'react';
 import { InputCheckboxVariants } from './partials/variants';
-import { FocusInput } from '../FocusInput';
+import { FormWrap } from '../FormWrap';
 
-export const InputCheckboxSwitch: FC = () => (
-	<FocusInput
-		RefInput={InputCheckboxVariants}
-		props={{
-			_variant: 'switch',
-		}}
-	/>
-);
+export const InputCheckboxSwitch: FC = () => <FormWrap RefComponent={InputCheckboxVariants} _variant="switch" />;

package/src/components/input-color/basic.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { FocusInput } from '../FocusInput';
+import { FormWrap } from '../FormWrap';
 import { InputColorVariants } from './partials/variants';
 
-export const InputColorBasic: FC = () => <FocusInput RefInput={InputColorVariants} />;
+export const InputColorBasic: FC = () => <FormWrap RefComponent={InputColorVariants} />;

package/src/components/input-date/basic.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { FocusInput } from '../FocusInput';
+import { FormWrap } from '../FormWrap';
 import { InputDateVariants } from './partials/variants';
 
-export const InputDateBasic: FC = () => <FocusInput RefInput={InputDateVariants} />;
+export const InputDateBasic: FC = () => <FormWrap RefComponent={InputDateVariants} />;

package/src/components/input-email/basic.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { FocusInput } from '../FocusInput';
+import { FormWrap } from '../FormWrap';
 import { InputEmailVariants } from './partials/variants';
 
-export const InputEmailBasic: FC = () => <FocusInput RefInput={InputEmailVariants} />;
+export const InputEmailBasic: FC = () => <FormWrap RefComponent={InputEmailVariants} />;

package/src/components/input-file/basic.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { FocusInput } from '../FocusInput';
+import { FormWrap } from '../FormWrap';
 import { InputFileVariants } from './partials/variants';
 
-export const InputFileBasic: FC = () => <FocusInput RefInput={InputFileVariants} />;
+export const InputFileBasic: FC = () => <FormWrap RefComponent={InputFileVariants} />;

package/src/components/input-number/basic.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { FocusInput } from '../FocusInput';
+import { FormWrap } from '../FormWrap';
 import { InputNumberVariants } from './partials/variants';
 
-export const InputNumberBasic: FC = () => <FocusInput RefInput={InputNumberVariants} />;
+export const InputNumberBasic: FC = () => <FormWrap RefComponent={InputNumberVariants} />;

package/src/components/input-password/basic.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { FocusInput } from '../FocusInput';
+import { FormWrap } from '../FormWrap';
 import { InputPasswordVariants } from './partials/variants';
 
-export const InputPasswordBasic: FC = () => <FocusInput RefInput={InputPasswordVariants} />;
+export const InputPasswordBasic: FC = () => <FormWrap RefComponent={InputPasswordVariants} />;

package/src/components/input-radio/basic.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { FocusInput } from '../FocusInput';
+import { FormWrap } from '../FormWrap';
 import { InputRadioVariants } from './partials/variants';
 
-export const InputRadioBasic: FC = () => <FocusInput RefInput={InputRadioVariants} />;
+export const InputRadioBasic: FC = () => <FormWrap RefComponent={InputRadioVariants} />;

package/src/components/input-range/basic.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { FocusInput } from '../FocusInput';
+import { FormWrap } from '../FormWrap';
 import { InputRangeVariants } from './partials/variants';
 
-export const InputRangeBasic: FC = () => <FocusInput RefInput={InputRangeVariants} />;
+export const InputRangeBasic: FC = () => <FormWrap RefComponent={InputRangeVariants} />;

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

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { FocusInput } from '../FocusInput';
+import { FormWrap } from '../FormWrap';
 import { InputTextVariants } from './partials/variants';
 
-export const InputTextBasic: FC = () => <FocusInput RefInput={InputTextVariants} />;
+export const InputTextBasic: FC = () => <FormWrap RefComponent={InputTextVariants} />;

package/src/components/pagination/basic.tsx

@@ -5,8 +5,9 @@ import { FC } from 'react';
 
 export const PaginationBasic: FC = () => (
 	<div className="grid gap-4">
-		<KolPagination _total={10} _page={6} _siblingCount={0} _label="Test Paginierung 1" />
-		<KolPagination _total={10} _page={6} _siblingCount={2} _variant="danger" _label="Test Paginierung 2" />
-		<KolPagination _total={10} _page={6} _siblingCount={0} _boundaryCount={2} _variant="ghost" _label="Test Paginierung 3" />
+		<KolPagination _max={10} _page={6} _siblingCount={0} _label="Test Paginierung 1" />
+		<KolPagination _max={10} _page={6} _siblingCount={2} _variant="danger" _label="Test Paginierung 2" />
+		<KolPagination _max={10} _page={6} _siblingCount={0} _boundaryCount={2} _variant="ghost" _label="Test Paginierung 3" />
+		<KolPagination _max={6} _page={6} _siblingCount={0} _boundaryCount={2} _variant="ghost" _label="Test Paginierung 3" />
 	</div>
 );

package/src/components/select/basic.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { FocusInput } from '../FocusInput';
+import { FormWrap } from '../FormWrap';
 import { SelectVariants } from './partials/variants';
 
-export const SelectBasic: FC = () => <FocusInput RefInput={SelectVariants} />;
+export const SelectBasic: FC = () => <FormWrap RefComponent={SelectVariants} />;

package/src/components/table/routes.ts

@@ -5,11 +5,13 @@ import { TableBadgeSize } from './badge-size';
 import { TableRenderCell } from './render-cell';
 
 import { TableSortTable } from './sort-date';
+import { TableWithPagination } from './with-pagination';
 
 export const TABLE_ROUTES: Routes = {
 	table: {
 		'badge-size': TableBadgeSize,
 		'render-cell': TableRenderCell,
 		'sort-data': TableSortTable,
+		'with-pagination': TableWithPagination,
 	},
 };

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

@@ -0,0 +1,22 @@
+import React, { FC } from 'react';
+
+import { KolTable } from '@public-ui/react';
+import { KoliBriTableHeaders } from '@public-ui/components';
+import { KoliBriTablePaginationProps } from '@public-ui/components/src';
+import { DATA } from './test-data';
+
+const HEADERS: KoliBriTableHeaders = {
+	horizontal: [
+		[
+			{ label: 'Order', key: 'order' },
+			{ label: 'Date', key: 'date' },
+		],
+	],
+};
+const PAGINATION: KoliBriTablePaginationProps = { _page: 2, _total: 1 };
+
+export const TableWithPagination: FC = () => (
+	<div>
+		<KolTable _label="Tabellenbeschreibung" _data={DATA} _headers={HEADERS} _pagination={PAGINATION}></KolTable>
+	</div>
+);

package/src/components/textarea/basic.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { FocusInput } from '../FocusInput';
+import { FormWrap } from '../FormWrap';
 import { TextareaVariants } from './partials/variants';
 
-export const TextareaBasic: FC = () => <FocusInput RefInput={TextareaVariants} />;
+export const TextareaBasic: FC = () => <FormWrap RefComponent={TextareaVariants} />;

package/src/components/types.tsx

@@ -0,0 +1,42 @@
+import { FormWrap } from './FormWrap';
+import { ButtonVariants } from './button/partials/variants';
+import { InputCheckboxVariants } from './input-checkbox/partials/variants';
+import { InputColorVariants } from './input-color/partials/variants';
+import { InputDateVariants } from './input-date/partials/variants';
+import { InputEmailVariants } from './input-email/partials/variants';
+import { InputFileVariants } from './input-file/partials/variants';
+import { InputNumberVariants } from './input-number/partials/variants';
+import { InputPasswordVariants } from './input-password/partials/variants';
+import { InputRadioVariants } from './input-radio/partials/variants';
+import { InputRangeVariants } from './input-range/partials/variants';
+import { InputTextVariants } from './input-text/partials/variants';
+import { SelectVariants } from './select/partials/variants';
+import { TextareaVariants } from './textarea/partials/variants';
+
+export type RefFormComponent =
+	| typeof InputCheckboxVariants
+	| typeof InputColorVariants
+	| typeof InputDateVariants
+	| typeof InputEmailVariants
+	| typeof InputFileVariants
+	| typeof InputNumberVariants
+	| typeof InputPasswordVariants
+	| typeof InputRadioVariants
+	| typeof InputRangeVariants
+	| typeof InputTextVariants
+	| typeof SelectVariants
+	| typeof TextareaVariants;
+
+export type RefComponent =
+	// | typeof AbbrVariants
+	// | typeof AccordionVariants
+	// | typeof AlertVariants
+	| typeof ButtonVariants
+	// | typeof ButtonLinkVariants
+	// | typeof CardVariants
+	// | typeof LinkVariants
+	// | typeof LinkButtonVariants
+	// | typeof PopoverVariants
+	// | typeof SplitButtonVariants
+	// | typeof TabsVariants
+	| RefFormComponent;

package/src/style.scss

@@ -1,3 +1,11 @@
+* {
+	font-family: Verdana;
+}
+
+body {
+	margin: 0;
+}
+
 dl,
 hr {
 	margin: 0;
@@ -19,10 +27,6 @@ hr {
 	grid-template-columns: auto auto;
 }
 
-.app-sidebar {
-	font-family: sans-serif;
-}
-
 @media (min-width: 1024px) {
 	.app-container {
 		display: grid;
@@ -36,8 +40,9 @@ hr {
 }
 
 @media print {
+
 	.no-print,
 	.no-print * {
 		display: none !important;
 	}
-}
+}

package/dist/9021.js

@@ -1,2 +0,0 @@
-/*! For license information please see 9021.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[9021],{1472:(t,e,o)=>{o.d(e,{A:()=>a});var n=o(1692),i=o(3203);const s=(0,o(9473).b)();class a{constructor(t,e,o){var n,a;if(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.name}) 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.name=e,s){switch(null===(n=this.host)||void 0===n||n.querySelectorAll("input,select,textarea").forEach((t=>{var e;null===(e=this.host)||void 0===e||e.removeChild(t)})),this.name){case"button":this.formAssociated=document.createElement("button");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===(a=this.host)||void 0===a||a.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(s)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){o&&("select"===this.name?(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)}}))):"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(s&&"string"==typeof t){const e=document.querySelector(t);e&&(this.syncToOwnInput=e)}}componentWillLoad(){this.validateName(this.component._name),this.validateSyncValueBySelector(this.component._syncValueBySelector)}}},7043:(t,e,o)=>{o.d(e,{I:()=>p,g:()=>h,v:()=>d});var n=o(1692),i=o(8425),s=o(3117),a=o(3203),l=o(9865),r=o(3576),c=o(1472);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}},d=(t,e,o)=>{(0,n.a)(t,"_hideError",e,o)};class u extends c.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 p extends u{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)},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)}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)}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,r.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.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,l.s)(t),(0,l.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){var e;const o=t.target.value;(0,l.s)(t),(0,l.t)("change",this.host,o),this.setFormAssociatedValue(o),"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onChange)&&this.component._on.onChange(t,o),this.valueChangeListeners.forEach((t=>t(o)))}onClick(t){var e;(0,l.s)(t),(0,l.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,l.s)(t),(0,l.t)("focus",this.host),"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onFocus)&&this.component._on.onFocus(t)}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)}}},9021:(t,e,o)=>{o.d(e,{I:()=>r});var n=o(7476),i=o(1692),s=o(2180),a=o(7043);const l=(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 r 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:l},required:!0})}))}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons||this.component._icon)}}},9865:(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})},8425:(t,e,o)=>{o.d(e,{v:()=>i});var n=o(1692);const i=(t,e,o={})=>{(0,n.a)(t,"_hideLabel",e,o)}},7476:(t,e,o)=>{o.d(e,{i:()=>l,v:()=>r,w:()=>c});var n=o(1692),i=o(2180);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,a,l,r,c;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"),l=(null===(n=t.nextState)||void 0===n?void 0:n.get("_iconAlign"))||t.state._iconAlign;null===(a=t.nextState)||void 0===a||a.set("_icons",((t,e)=>{let o={};return(0,i.i)(t,1)?o="right"===e?{right:{icon:t}}:{left:{icon:t}}:"object"==typeof t&&null!==t&&(s(o,"top",t.top),s(o,"right",t.right),s(o,"bottom",t.bottom),s(o,"left",t.left)),o})(e,l))}else if(null===(l=t.nextState)||void 0===l?void 0:l.has("_iconAlign")){const e=t.state._iconAlign;null===(r=t.nextState)||void 0===r||r.set("_icons",{[e]:void 0,[null===(c=t.nextState)||void 0===c?void 0:c.get("_iconAlign")]:t.state._icons[e]})}},l=t=>"object"==typeof t&&null!==t&&(void 0===t.style||(0,i.b)(t.style))&&(0,i.i)(t.icon,1),r=(t,e)=>{(0,n.o)(e,(()=>{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)||l(t.left)||(0,i.i)(t.right,1)||l(t.right)||(0,i.i)(t.top,1)||l(t.top)||(0,i.i)(t.bottom,1)||l(t.bottom))),new Set(["KoliBriIcon"]),e,{hooks:{beforePatch:(e,o)=>{null===e&&o.set("_icons",{}),a(t)}},required:!0})}))},c=(t,e)=>{(0,n.w)(t,"_iconAlign",(t=>"left"===t||"right"===t),new Set(["Alignment {left, right, top, bottom}"]),e,{hooks:{beforePatch:()=>{a(t)}}})}},3117:(t,e,o)=>{o.d(e,{a:()=>d,c:()=>r,h:()=>l,v:()=>h});var n=o(3203),i=o(1692);const s=/[a-zA-Z0-9äöüÄÖÜß]/g,a=/^\d+$/;function l(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 r(t){return a.test(t)}const c=new Set(["string"]),h=(t,e,o={})=>{(0,i.w)(t,"_label",(t=>"string"==typeof t),c,e,function(t){var e;return{hooks:{afterPatch:(e,o,i,s)=>{var a,c;"function"==typeof(null===(a=t.hooks)||void 0===a?void 0:a.afterPatch)&&(null===(c=t.hooks)||void 0===c||c.afterPatch(e,o,i,s)),"string"==typeof e&&!1===l(e,3)&&!1===r(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},3576:(t,e,o)=>{o.d(e,{v:()=>a});var n=o(3203),i=o(1692);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)}}}]);