@public-ui/sample-react 2.0.2 → 2.0.4-rc.0

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

@@ -0,0 +1,34 @@
+import React, { FC } from 'react';
+
+import { KolTable } from '@public-ui/react';
+import { KoliBriTableHeaders, KoliBriTablePaginationProps } from '@public-ui/components';
+import { Data, DATA } from './test-data';
+import { DATE_FORMATTER } from './formatter';
+import { SampleDescription } from '../SampleDescription';
+const HEADERS: KoliBriTableHeaders = {
+	horizontal: [
+		[
+			{ label: 'Order', key: 'order' },
+			{ label: 'Date', key: 'date', render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as unknown as Data).date) },
+		],
+	],
+};
+const PAGINATION: KoliBriTablePaginationProps = { _page: 2 };
+
+export const PaginationPosition: FC = () => (
+	<div className="grid gap-14">
+		<SampleDescription>Tables with different pagination positions.</SampleDescription>
+		<section>
+			<h2>Table with pagination at the bottom.</h2>
+			<KolTable _label="Tabellenbeschreibung" _data={DATA} _headers={HEADERS} _pagination={PAGINATION} _paginationPosition="bottom"></KolTable>
+		</section>
+		<section>
+			<h2>Table with pagination at the top.</h2>
+			<KolTable _label="Tabellenbeschreibung" _data={DATA} _headers={HEADERS} _pagination={PAGINATION} _paginationPosition="top"></KolTable>
+		</section>
+		<section>
+			<h2>Table with pagination at both top and bottom.</h2>
+			<KolTable _label="Tabellenbeschreibung" _data={DATA} _headers={HEADERS} _pagination={PAGINATION} _paginationPosition="both"></KolTable>
+		</section>
+	</div>
+);

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

@@ -4,41 +4,97 @@ import { KolButton, KolInputText, KolTable } from '@public-ui/react';
 
 import { getRoot } from '../../shares/react-roots';
 import { KoliBriTableHeaders } from '@public-ui/components';
-import { DATA, Data } from './test-data';
 import { DATE_FORMATTER } from './formatter';
 import { SampleDescription } from '../SampleDescription';
 
+type Data = {
+	order: number;
+	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'),
+	},
+];
+
 const HEADERS: KoliBriTableHeaders = {
 	horizontal: [
 		[
-			{ label: '#', key: 'order', textAlign: 'center' },
 			{
-				label: 'Datum (string)',
+				label: '#',
+				key: 'order',
+				textAlign: 'center',
+				width: '10em',
+
+				/* Example 1: Use render return value to format data */
+				render: (_el, cell) => `Index: ${cell.label}`,
+			},
+			{
+				label: 'Status',
+				key: 'shipped',
+				textAlign: 'center',
+				width: '10em',
+
+				/* Example 2: Simple render function using textContent */
+				render: (el, cell) => {
+					if (cell.label) {
+						el.textContent = `Order has been dispatched 🚚`;
+					} else {
+						el.textContent = `Order pending 📦`;
+					}
+				},
+			},
+			{
+				label: 'Date (string)',
 				key: 'date',
+				width: '20em',
 				textAlign: 'center',
-				render: (el, tupel) => {
-					// https://reactjs.org/docs/portals.html
-					getRoot(el).render(<strong>{DATE_FORMATTER.format(tupel.label as unknown as Date)}</strong>);
+
+				/* Example 3: Render function using innerHTML. ⚠️Make sure to sanitize data to avoid XSS. */
+				render: (el, cell) => {
+					el.innerHTML = `<strong>${DATE_FORMATTER.format(cell.label as unknown as Date)}</strong>`;
 				},
-				sort: (data: Data[]) =>
-					data.sort((data0, data1) => {
-						if (data0.date < data1.date) return -1;
-						else if (data1.date < data0.date) return 1;
-						else return 0;
-					}),
+				sort: (data: Data[]) => data.sort((data0, data1) => data0.date.getTime() - data1.date.getTime()),
 			},
 			{
-				label: 'Aktion (react)',
+				label: 'Action (react)',
 				key: 'order',
+				width: '20em',
+
+				/* Example 4: Render function using React */
 				render: (el) => {
-					el.setAttribute('role', 'presentation');
-
-					// https://reactjs.org/docs/portals.html
-					getRoot(el).render(
-						<>
-							<KolButton _label={'Speichern'} />
-							<KolInputText _label="Eingabe" />
-						</>,
+					const renderElement = document.createElement('div');
+					renderElement.setAttribute('role', 'presentation');
+					el.innerHTML = '';
+					el.appendChild(renderElement);
+
+					/* https://react.dev/reference/react-dom/client/createRoot */
+					getRoot(renderElement).render(
+						<div
+							style={{
+								display: `grid`,
+								gridAutoFlow: `column`,
+								alignItems: `end`,
+								gap: `1rem`,
+								maxWidth: `400px`,
+							}}
+						>
+							<KolInputText _label="Input" />
+							<KolButton _label={'Save'} />
+						</div>,
 					);
 				},
 			},
@@ -51,6 +107,6 @@ export const TableRenderCell: FC = () => (
 		<SampleDescription>
 			<p>This sample simulates the usage of React render functions for the table column contents.</p>
 		</SampleDescription>
-		<KolTable _label="Sort a date column" _data={DATA} _headers={HEADERS} className="block" />
+		<KolTable _label="Sort by date column" _data={DATA} _headers={HEADERS} className="block min-w-75em" />
 	</>
 );

package/src/components/table/routes.ts

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

package/src/components/table/{sort-date.tsx → sort-data.tsx}

@@ -30,4 +30,4 @@ const HEADERS: KoliBriTableHeaders = {
 	],
 };
 
-export const TableSortTable: FC = () => <KolTable _label="Sort a date column" _data={DATA} _headers={HEADERS} className="block" />;
+export const TableSortData: FC = () => <KolTable _label="Sort a date column" _data={DATA} _headers={HEADERS} className="block" />;

package/src/react.main.tsx

@@ -5,8 +5,7 @@ import { HashRouter as Router } from 'react-router-dom';
 import { defineCustomElements } from '@public-ui/components/dist/loader';
 import type { Generic } from 'adopted-style-sheets';
 import { register } from '@public-ui/components';
-import { BAMF, BMF, BZStv1, DEFAULT, DESYv1, DESYv2, ECL_EC, ECL_EU, ITZBund, MAPZ, ZOLLv2, ZOLLv3 } from '@public-ui/themes';
-import { TH } from '@public-oss/kolibri-themes';
+import { BMF, DEFAULT, ECL_EC, ECL_EU, ITZBund } from '@public-ui/themes';
 import { App } from './App';
 
 type Theme = Generic.Theming.RegisterPatch<string, string, string>;
@@ -23,7 +22,7 @@ void (async () => {
 	} else {
 		/* Regular mode: Register all known themes. */
 		try {
-			await register([BAMF, BMF, DEFAULT, BZStv1, DESYv1, DESYv2, ECL_EC, ECL_EU, ITZBund, MAPZ, ZOLLv2, ZOLLv3, TH], defineCustomElements, {
+			await register([BMF, DEFAULT, ECL_EC, ECL_EU, ITZBund], defineCustomElements, {
 				theme: {
 					detect: 'auto',
 				},

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

@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { KolButton, KolForm, KolHeading, KolSelect } from '@public-ui/react';
 import { Field, FieldProps, useFormikContext } from 'formik';
 import { FormValues } from './AppointmentForm';
-import { ErrorList } from './ErrorList';
+import { ErrorListPropType } from '@public-ui/components';
 
 const LOCATION_OPTIONS = [
 	{
@@ -29,23 +29,23 @@ const LOCATION_OPTIONS = [
 
 export function DistrictForm() {
 	const form = useFormikContext<FormValues>();
-	const [sectionSubmitted, setSectionSubmitted] = useState(false);
+	const errorList = createErrorList(form.errors);
+
+	function createErrorList(formikErrors: Record<string, string>): ErrorListPropType[] {
+		return Object.keys(formikErrors).map((fieldName) => ({
+			message: formikErrors[fieldName],
+			selector: `#field-${fieldName}`,
+		}));
+	}
 
 	return (
 		<div className="p-2">
 			<KolHeading _level={2} _label="Wählen Sie einen Stadtteil aus"></KolHeading>
-
-			{sectionSubmitted && Object.keys(form.errors).length ? (
-				<div className="mt-2">
-					<ErrorList errors={form.errors} />
-				</div>
-			) : null}
-
 			<KolForm
+				_errorList={errorList}
 				_on={{
 					onSubmit: () => {
 						void form.submitForm();
-						setSectionSubmitted(true);
 					},
 				}}
 			>

package/src/shares/theme.ts

@@ -1,21 +1,15 @@
 import { SelectOption } from '@public-ui/components';
 
-export type Theme = 'bmf' | 'bzst-v1' | 'default' | 'ecl-ec' | 'ecl-eu' | 'itzbund' | 'mapz' | 'th' | 'unstyled' | 'zoll-v2' | 'zoll-v3';
+export type Theme = 'bmf' | 'default' | 'ecl-ec' | 'ecl-eu' | 'itzbund' | 'unstyled';
+
+const drafts: Theme[] = ['ecl-ec', 'ecl-eu', 'itzbund'];
+
+export const isDraftTheme = (theme: Theme) => drafts.includes(theme);
 
 export const isTheme = (value: unknown) => {
 	return (
 		typeof value === 'string' &&
-		(value === 'unstyled' ||
-			value === 'bmf' ||
-			value === 'bzst-v1' ||
-			value === 'default' ||
-			value === 'ecl-ec' ||
-			value === 'ecl-eu' ||
-			value === 'itzbund' ||
-			value === 'mapz' ||
-			value === 'th' ||
-			value === 'zoll-v2' ||
-			value === 'zoll-v3')
+		(value === 'bmf' || value === 'default' || value === 'ecl-ec' || value === 'ecl-eu' || value === 'itzbund' || value === 'unstyled')
 	);
 };
 
@@ -26,47 +20,27 @@ export type Store = {
 
 export const THEME_OPTIONS: SelectOption<Theme>[] = [
 	{
-		label: 'Unstyled',
+		label: 'Unstyled (Uncolored)',
 		value: 'unstyled',
 	},
 	{
-		label: 'Bundesministerium der Finanzen',
+		label: 'Bundesministerium der Finanzen (Tested)',
 		value: 'bmf',
 	},
 	{
-		label: 'Bundeszentralamt für Steuern (v1)',
-		value: 'bzst-v1',
-	},
-	{
-		label: 'Default',
+		label: 'Default (Tested)',
 		value: 'default',
 	},
 	{
-		label: 'European Commission (ECL)',
+		label: 'European Commission (Draft)',
 		value: 'ecl-ec',
 	},
 	{
-		label: 'European Union (ECL)',
+		label: 'European Union (Draft)',
 		value: 'ecl-eu',
 	},
 	{
-		label: 'Informationstechnikzentrum Bund',
+		label: 'Informationstechnikzentrum Bund (Draft)',
 		value: 'itzbund',
 	},
-	{
-		label: '.',
-		value: 'mapz',
-	},
-	{
-		label: 'Freistaat Thüringen',
-		value: 'th',
-	},
-	{
-		label: '..',
-		value: 'zoll-v2',
-	},
-	{
-		label: '...',
-		value: 'zoll-v3',
-	},
 ];

package/dist/1399.js

@@ -1,2 +0,0 @@
-/*! For license information please see 1399.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[1399],{1399:(t,e,l)=>{l.r(e),l.d(e,{initialize:()=>a});var i=l(2143),r=l(5440);function n(t,e){try{Object.defineProperty((0,i.g)(),t,{get:function(){return e}})}catch(e){i.L.debug(`KoliBri property ${t} is already bind.`)}}const o=(t,e)=>i.L.debug(`${t} ${e?"":"not "}activated`),a=()=>{if((0,i.i)(),(0,i.h)()){(0,i.r)(),n("a11yColorContrast",r.l),n("querySelector",r.k),n("querySelectorAll",r.n),n("querySelectorColors",r.q),n("utils",(function(){return r.j})),n("parseJson",r.p),n("stringifyJson",r.t);const t=(0,i.a)().body,e=(0,i.a)().createElement("svg");if(e.setAttribute("aria-label","KoliBri-DevTools"),e.setAttribute("xmlns","http://www.w3.org/2000/svg"),e.setAttribute("role","toolbar"),e.setAttribute("style","position: fixed;color: black;font-size: 200%;bottom: 0.25rem;right: 0.25rem;"),e.innerHTML='<svg\n  xmlns="http://www.w3.org/2000/svg"\n  width="50"\n  height="50"\n  viewBox="0 0 600 600"\n>\n  <path d="M353 322L213 304V434L353 322Z" fill="#047" />\n  <path d="M209 564V304L149 434L209 564Z" fill="#047" />\n  <path d="M357 316L417 250L361 210L275 244L357 316Z" fill="#047" />\n  <path d="M353 318L35 36L213 300L353 318Z" fill="#047" />\n  <path d="M329 218L237 92L250 222L272 241L329 218Z" fill="#047" />\n  <path d="M391 286L565 272L421 252L391 286Z" fill="#047" />\n</svg>',(0,i.a)().body.appendChild(e),o("Development mode",(0,i.h)()),o("Experimental mode",(0,i.d)()),o("Color contrast analysis",(0,i.j)()),(0,i.j)()){const e=setTimeout((()=>{clearTimeout(e),setInterval((()=>{r.j.queryHtmlElementColors((0,i.a)().createElement("div"),(0,r.l)(t),!1,!1)}),1e4)}),2500)}}}}}]);

package/dist/3035.js

@@ -1,2 +0,0 @@
-/*! For license information please see 3035.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[3035],{83:(t,e,o)=>{o.d(e,{I:()=>i});var n=o(6216);const i=({accessKey:t,label:e})=>{let[o,...i]=e.split(t);return 0===i.length&&(t=t.toUpperCase(),[o,...i]=e.split(t)),0===i.length&&(t=t.toLowerCase(),[o,...i]=e.split(t)),(0,n.h)(n.F,null,o,i.length?(0,n.h)(n.F,null,(0,n.h)("u",null,t),i.join(t)):null)}},3672:(t,e,o)=>{o.d(e,{A:()=>a});var n=o(5440),i=o(4289);const s=(0,o(2143).d)();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.g)(`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)}}},4725:(t,e,o)=>{o.d(e,{I:()=>u,g:()=>h});var n=o(5440),i=o(6281),s=o(4956),a=o(4289),r=o(4014),l=o(6430),c=o(3672);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 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 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)},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.e)()}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)}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,l.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){var e;const o=t.target.value;(0,r.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,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)}addValueChangeListener(t){this.valueChangeListeners.push(t)}}},647:(t,e,o)=>{o.d(e,{I:()=>l});var n=o(2508),i=o(5440),s=o(8670),a=o(4725);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 l 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)}}},4014:(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})},6281:(t,e,o)=>{o.d(e,{v:()=>i});var n=o(5440);const i=(t,e,o={})=>{(0,n.a)(t,"_hideLabel",e,o)}},2508:(t,e,o)=>{o.d(e,{i:()=>a,v:()=>r});var n=o(5440),i=o(8670);const s=(t,e,o)=>{(0,i.c)(o)?t[e]=o:(0,i.i)(o,1)&&(t[e]={icon:o})},a=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)||a(t.left)||(0,i.i)(t.right,1)||a(t.right)||(0,i.i)(t.top,1)||a(t.top)||(0,i.i)(t.bottom,1)||a(t.bottom))),new Set(["KoliBriIcon"]),e,{hooks:{beforePatch:(e,o)=>{null===e&&o.set("_icons",{}),(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))}})(t)}},required:!0})}))}},4956:(t,e,o)=>{o.d(e,{a:()=>d,c:()=>l,h:()=>r,v:()=>h});var n=o(4289),i=o(5440);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 l(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===r(e,3)&&!1===l(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},6430:(t,e,o)=>{o.d(e,{v:()=>a});var n=o(4289),i=o(5440);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)}}}]);

package/dist/4114.js

@@ -1,2 +0,0 @@
-/*! For license information please see 4114.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[4114],{4114:(e,t,a)=>{switch(location.pathname){case"/dev/toaster.html":a.e(4756).then(a.bind(a,4756));break;case"/dev/reprod-accordion-does-not-toggle-with-open.html":a.e(2079).then(a.bind(a,2079));break;case"/dev/details-synced-open-state.html":a.e(3034).then(a.bind(a,3034))}}}]);