@public-ui/sample-react 1.7.16 → 1.7.18

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "1.7.16",
+  "version": "1.7.18",
   "description": "This app contains samples for the KoliBri/Public UI",
   "license": "EUPL-1.2",
   "dependencies": {
     "@leanup/stack": "1.3.49",
     "@leanup/stack-react": "1.3.49",
     "@leanup/stack-webpack": "1.3.49",
-    "@public-ui/components": "1.7.16",
-    "@public-ui/react": "1.7.16",
-    "@public-ui/themes": "1.7.16",
+    "@public-ui/components": "1.7.18",
+    "@public-ui/react": "1.7.18",
+    "@public-ui/themes": "1.7.18",
     "@types/node": "ts5.4",
-    "@types/react": "18.2.68",
+    "@types/react": "18.2.73",
     "@types/react-dom": "18.2.22",
-    "@unocss/preset-uno": "0.58.6",
-    "@unocss/webpack": "0.58.6",
+    "@unocss/preset-uno": "0.58.7",
+    "@unocss/webpack": "0.58.7",
     "ajv": "8.12.0",
     "chromedriver": "122.0.6",
     "cpy-cli": "5.0.0",

package/src/components/handout/basic.tsx

@@ -11,9 +11,6 @@ import {
 	KolDetails,
 	KolForm,
 	KolHeading,
-	KolIcon,
-	KolImage,
-	KolIndentedText,
 	KolInputCheckbox,
 	KolInputColor,
 	KolInputDate,
@@ -27,24 +24,18 @@ import {
 	KolKolibri,
 	KolLink,
 	KolLinkButton,
-	KolLinkGroup,
 	KolLogo,
-	KolModal,
 	KolNav,
-	KolPagination,
 	KolProgress,
-	KolQuote,
 	KolSelect,
-	KolSkipNav,
-	KolSpin,
 	KolTable,
 	KolTabs,
 	KolTextarea,
 	KolVersion,
 } from '@public-ui/react';
-import PackageJson from '../../../package.json';
 import React, { FC } from 'react';
 import { getTheme, getThemeName } from '../../shares/store';
+import { getRoot } from '../../shares/react-roots';
 
 const TABLE_HEADERS: KoliBriTableHeaders = {
 	horizontal: [
@@ -67,15 +58,12 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 			{
 				key: 'montag',
 				label: 'Montag',
-				render: (el, data) => {
-					const button = document.createElement('kol-button');
-					button.setAttribute('_label', data.label);
-					button.setAttribute('data-theme', 'default');
-					button.setAttribute('style', 'font-size: 75%');
-					button.setAttribute('exportparts', 'button,normal');
-					button._on = { onClick: console.log };
+				render: (el, cell) => {
+					const renderElement = document.createElement('div');
+					renderElement.setAttribute('role', 'presentation');
 					el.innerHTML = '';
-					el.appendChild(button);
+					el.appendChild(renderElement);
+					getRoot(renderElement).render(<KolButton _label={cell.label} style={{ fontSize: '75%' }} data-theme="default" />);
 				},
 				sort: (data) => {
 					return data.sort((first, second) => {
@@ -94,8 +82,12 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 			{
 				key: 'dienstag',
 				label: 'Dienstag',
-				render: (el, data) => {
-					el.innerHTML = `<kol-badge _color="#060" _label="${data.label}"></kol-badge>`;
+				render: (el, cell) => {
+					const renderElement = document.createElement('div');
+					renderElement.setAttribute('role', 'presentation');
+					el.innerHTML = '';
+					el.appendChild(renderElement);
+					getRoot(renderElement).render(<KolBadge _color="#060" _label={cell.label}></KolBadge>);
 				},
 				sort: (data) => {
 					return data.sort((first, second) => {
@@ -113,36 +105,56 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 			{
 				key: 'mittwoch',
 				label: 'Mittwoch',
-				render: (el, data) => {
-					el.innerHTML = `<kol-badge _color="#006" _label="${data.label}"></kol-badge>`;
+				render: (el, cell) => {
+					const renderElement = document.createElement('div');
+					renderElement.setAttribute('role', 'presentation');
+					el.innerHTML = '';
+					el.appendChild(renderElement);
+					getRoot(renderElement).render(<KolBadge _color="#006" _label={cell.label}></KolBadge>);
 				},
 			},
 			{
 				key: 'donnerstag',
 				label: 'Donnerstag',
-				render: (el, data) => {
-					el.innerHTML = `<kol-badge _color="#600" _label="${data.label}"></kol-badge>`;
+				render: (el, cell) => {
+					const renderElement = document.createElement('div');
+					renderElement.setAttribute('role', 'presentation');
+					el.innerHTML = '';
+					el.appendChild(renderElement);
+					getRoot(renderElement).render(<KolBadge _color="#600" _label={cell.label}></KolBadge>);
 				},
 			},
 			{
 				key: 'freitag',
 				label: 'Freitag',
-				render: (el, data) => {
-					el.innerHTML = `<kol-badge _color="#303" _label="${data.label}"></kol-badge>`;
+				render: (el, cell) => {
+					const renderElement = document.createElement('div');
+					renderElement.setAttribute('role', 'presentation');
+					el.innerHTML = '';
+					el.appendChild(renderElement);
+					getRoot(renderElement).render(<KolBadge _color="#303" _label={cell.label}></KolBadge>);
 				},
 			},
 			{
 				key: 'samstag',
 				label: 'Samstag',
-				render: (el, data) => {
-					el.innerHTML = `<kol-badge _color="#330" _label="${data.label}"></kol-badge>`;
+				render: (el, cell) => {
+					const renderElement = document.createElement('div');
+					renderElement.setAttribute('role', 'presentation');
+					el.innerHTML = '';
+					el.appendChild(renderElement);
+					getRoot(renderElement).render(<KolBadge _color="#330" _label={cell.label}></KolBadge>);
 				},
 			},
 			{
 				key: 'sonntag',
 				label: 'Sonntag',
-				render: (el, data) => {
-					el.innerHTML = `<kol-badge _color="#033" _label="${data.label}"></kol-badge>`;
+				render: (el, cell) => {
+					const renderElement = document.createElement('div');
+					renderElement.setAttribute('role', 'presentation');
+					el.innerHTML = '';
+					el.appendChild(renderElement);
+					getRoot(renderElement).render(<KolBadge _color="#033" _label={cell.label}></KolBadge>);
 				},
 			},
 		],

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

@@ -1,9 +1,10 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
 
-import { KolButton, KolInputText, KolTable } from '@public-ui/react';
+import { createReactRenderElement, KolButton, KolInputText, KolTable } from '@public-ui/react';
 
 import { getRoot } from '../../shares/react-roots';
-import { KoliBriTableHeaders } from '@public-ui/components';
+import type { KoliBriTableHeaders } from '@public-ui/components';
 import { DATE_FORMATTER } from './formatter';
 
 type Data = {
@@ -75,13 +76,7 @@ const HEADERS: KoliBriTableHeaders = {
 
 				/* Example 4: Render function using React */
 				render: (el) => {
-					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(
+					getRoot(createReactRenderElement(el)).render(
 						<div
 							style={{
 								display: `grid`,

package/src/components/toast/basic.tsx

@@ -3,9 +3,9 @@ import { KolButton } from '@public-ui/react';
 import React, { FC } from 'react';
 import { getRoot } from '../../shares/react-roots';
 
-const toaster = ToasterService.getInstance(document);
-
 export const ToastBasic: FC = () => {
+	const toaster = ToasterService.getInstance(document);
+
 	const handleButtonClickSimple = () => {
 		void toaster.enqueue({
 			description: 'Toasty',

package/src/react.main.tsx

@@ -1,42 +1,62 @@
 import React, { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { HashRouter as Router } from 'react-router-dom';
+import { setTagNameTransformer } from '@public-ui/react';
 
 import { bootstrap } from '@public-ui/components';
 import { defineCustomElements } from '@public-ui/components/dist/loader';
 import { BMF, DEFAULT, ECL_EC, ECL_EU, ITZBund } from '@public-ui/themes';
-import type { Generic } from 'adopted-style-sheets';
+
 import { App } from './App';
 
+import type { Generic } from 'adopted-style-sheets';
+
 type Theme = Generic.Theming.RegisterPatch<string, string, string>;
 
-void (async () => {
+const ENABLE_TAG_NAME_TRANSFORMER =
+	process.env.ENABLE_TAG_NAME_TRANSFORMER === 'true' || new URL('https://x' + location.hash.substring(1)).searchParams.has('enableTagNameTransformer');
+
+const tagNameTransformer = (tagName: string) => `${tagName}-sample`;
+if (ENABLE_TAG_NAME_TRANSFORMER) {
+	setTagNameTransformer(tagNameTransformer);
+}
+
+const getThemes = async () => {
 	if (process.env.THEME_MODULE) {
 		/* Visual regression testing mode: Themes are overridden with a certain theme module, that should be used instead. */
-		const { [(process.env.THEME_EXPORT as string) ?? 'default']: theme } = (await import(process.env.THEME_MODULE)) as Record<string, Theme>;
-		try {
-			await bootstrap([theme], defineCustomElements, {
-				translation: {
-					name: 'de',
-				},
-			});
-		} catch (error) {
-			console.warn('Theme registration failed:', error);
-		}
-	} else {
-		/* Regular mode: Register all known themes. */
-		try {
-			await bootstrap([BMF, DEFAULT, ECL_EC, ECL_EU, ITZBund], defineCustomElements, {
-				theme: {
-					detect: 'auto',
-				},
+		const { [(process.env.THEME_EXPORT as string) || 'default']: theme } = (await import(process.env.THEME_MODULE)) as Record<string, Theme>;
+		return [theme];
+	}
+
+	/* List of regular sample app themes */
+	return [BMF, DEFAULT, ECL_EC, ECL_EU, ITZBund];
+};
+
+void (async () => {
+	try {
+		await bootstrap(
+			await getThemes(),
+			() => {
+				// @see https://github.com/ionic-team/stencil/issues/2847
+				// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+				defineCustomElements(window, {
+					transformTagName: ENABLE_TAG_NAME_TRANSFORMER ? tagNameTransformer : undefined,
+				} as any);
+			},
+			{
+				theme: process.env.THEME_MODULE
+					? undefined
+					: {
+							detect: 'auto',
+						},
 				translation: {
 					name: 'de',
 				},
-			});
-		} catch (error) {
-			console.warn('Theme registration failed:', error);
-		}
+				transformTagName: ENABLE_TAG_NAME_TRANSFORMER ? tagNameTransformer : undefined,
+			},
+		);
+	} catch (error) {
+		console.warn('Theme registration failed:', error);
 	}
 
 	/**

package/src/shares/react-roots.ts

@@ -4,6 +4,7 @@ const REACT18_ROOTS = new WeakMap<Element | DocumentFragment, Root>();
 
 export const getRoot = (el: Element | DocumentFragment): Root => {
 	if (REACT18_ROOTS.has(el) === false) {
+		/* https://react.dev/reference/react-dom/client/createRoot */
 		REACT18_ROOTS.set(el, createRoot(el));
 	}
 	return REACT18_ROOTS.get(el) as Root;

package/webpack.config.js

@@ -8,6 +8,7 @@ module.exports = (...args) => {
 		new webpack.EnvironmentPlugin({
 			THEME_MODULE: '',
 			THEME_EXPORT: '',
+			ENABLE_TAG_NAME_TRANSFORMER: '',
 		}),
 	);
 	return config;

package/dist/232.js

@@ -1,2 +0,0 @@
-/*! For license information please see 232.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[232],{6104:(t,e,o)=>{o.d(e,{A:()=>a});var n=o(4312),i=o(8716),s=o(1416);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)}}},5952:(t,e,o)=>{o.d(e,{I:()=>u,g:()=>h});var n=o(4312),i=o(8424),s=o(8940),a=o(8716),r=o(1500),c=o(8260),l=o(6104);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){var e;const o=t.target.value;(0,r.t)("change",this.host,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)}onInput(t,e=!0){var o;const n=t.target.value;(0,r.s)(t),(0,r.t)("input",this.host),e&&this.setFormAssociatedValue(n),"function"==typeof(null===(o=this.component._on)||void 0===o?void 0:o.onInput)&&this.component._on.onInput(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)}}},232:(t,e,o)=>{o.d(e,{I:()=>c});var n=o(5116),i=o(4312),s=o(5776),a=o(5952);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)}}},1500:(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})},8424:(t,e,o)=>{o.d(e,{v:()=>i});var n=o(4312);const i=(t,e,o={})=>{(0,n.a)(t,"_hideLabel",e,o)}},5116:(t,e,o)=>{o.d(e,{i:()=>r,v:()=>c,w:()=>l});var n=o(4312),i=o(5776);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)}}})}},8940:(t,e,o)=>{o.d(e,{a:()=>d,c:()=>c,h:()=>r,v:()=>h});var n=o(8716),i=o(4312);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},8260:(t,e,o)=>{o.d(e,{v:()=>a});var n=o(8716),i=o(4312);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/4064.js

@@ -1,2 +0,0 @@
-/*! For license information please see 4064.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[4064],{3308:(e,t,a)=>{a.d(t,{v:()=>l});var i=a(4312);const s=new Set([...new Set(['"left", "right"']),...new Set(['"bottom", "top"'])]),l=(e,t,a)=>{(0,i.w)(e,t,(e=>"bottom"===e||"left"===e||"right"===e||"top"===e),s,a,{defaultValue:"top"})}},8212:(e,t,a)=>{a.d(t,{a:()=>n,b:()=>r,c:()=>s,v:()=>l});var i=a(4312);const s=(e,t)=>{(0,i.d)(e,"_role",t)},l=(e,t)=>{(0,i.d)(e,"_ariaControls",t)},o=(e,t,a)=>{(0,i.w)(e,t,(e=>"date"===e||"location"===e||"page"===e||"step"===e||"time"===e||!0===e||!1===e),new Set(["String {data, location, page, step, time}","boolean"]),a)},n=(e,t)=>{o(e,"_ariaCurrent",t)},r=(e,t)=>{o(e,"_listenAriaCurrent",t)}},6104:(e,t,a)=>{a.d(t,{A:()=>o});var i=a(4312),s=a(8716),l=a(1416);class o{constructor(e,t,a){var i,o,n,r;if(this.experimentalMode=(0,l.a)(),this.setFormAssociatedValue=e=>{var t;const a=null===(t=this.formAssociated)||void 0===t?void 0:t.getAttribute("name");null!==a&&""!==a||(0,s.d)(` The form field (${this.type}) must have a name attribute to be form-associated. Please define the _name attribute.`);const i=this.tryToStringifyValue(e);this.syncValue(e,i,this.formAssociated),this.syncValue(e,i,this.syncToOwnInput)},this.component=e,this.host=this.findHostWithShadowRoot(a),this.type=t,this.experimentalMode&&("KOL-BUTTON"===(r=null===(i=this.host)||void 0===i?void 0:i.tagName)||"KOL-INPUT-CHECKBOX"===r||"KOL-INPUT-COLOR"===r||"KOL-INPUT-DATE"===r||"KOL-INPUT-EMAIL"===r||"KOL-INPUT-FILE"===r||"KOL-INPUT-NUMBER"===r||"KOL-INPUT-PASSWORD"===r||"KOL-INPUT-RADIO"===r||"KOL-INPUT-RANGE"===r||"KOL-INPUT-TEXT"===r||"KOL-SELECT"===r||"KOL-TEXTAREA"===r)){switch(null===(o=this.host)||void 0===o||o.querySelectorAll("input,select,textarea").forEach((e=>{var t;null===(t=this.host)||void 0===t||t.removeChild(e)})),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===(n=this.host)||void 0===n||n.appendChild(this.formAssociated)}}findHostWithShadowRoot(e){for(;null===(null==e?void 0:e.shadowRoot)&&e!==document.body;)(e=null==e?void 0:e.parentNode).host&&(e=e.host);return e}setAttribute(e,t,a){if(this.experimentalMode)try{if("boolean"!=typeof(a="object"==typeof a&&null!==a?JSON.stringify(a):a)&&"number"!=typeof a&&"string"!=typeof a)throw new Error("Invalid value type: "+typeof a);null==t||t.setAttribute(e,`${a}`)}catch(a){null==t||t.removeAttribute(e)}}tryToStringifyValue(e){try{return"object"==typeof e&&null!==e?JSON.stringify(e).toString():null==e?null:e.toString()}catch(e){return(0,s.h)(`The form field raw value is not able to stringify! ${e}`),""}}syncValue(e,t,a){if(a)switch(this.type){case"file":a.files=e;break;case"select":a.querySelectorAll("option").forEach((e=>{a.removeChild(e)})),Array.isArray(e)&&e.forEach((e=>{const t=this.tryToStringifyValue(e);if("string"==typeof t){const e=document.createElement("option");e.setAttribute("value",t),e.setAttribute("selected",""),a.appendChild(e)}}));break;default:"string"==typeof t?(a.setAttribute("value",t),a.value=t):(a.removeAttribute("value"),a.value="")}}validateName(e){((e,t,a)=>{(0,i.d)(e,"_name",t,a)})(this.component,e,{hooks:{afterPatch:()=>{this.setAttribute("name",this.formAssociated,this.component.state._name)}}}),void 0===e&&(0,s.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(e){if(this.experimentalMode&&"string"==typeof e){const t=document.querySelector(e);t&&(this.syncToOwnInput=t)}}componentWillLoad(){this.validateName(this.component._name),this.validateSyncValueBySelector(this.component._syncValueBySelector)}}},2976:(e,t,a)=>{a.d(t,{a:()=>n,p:()=>r});var i=a(8716),s=a(1416),l=a(4312);const o=e=>{for((0,s.a)()&&((0,i.d)("↓ Search form element start."),console.log(e));e instanceof HTMLElement&&"FORM"!==e.tagName&&"KOL-FORM"!==e.tagName;)e=e.parentElement instanceof HTMLElement?e.parentElement:e.parentNode instanceof ShadowRoot?e.parentNode.host:null,(0,s.a)()&&console.log(e);return(0,s.a)()&&(0,i.d)("↑ Search form element finished."),e},n=(e={})=>{var t,a;const i=o(e.form);if(i instanceof HTMLElement){const e=new Event("reset",{bubbles:!0,cancelable:!0});if("FORM"===i.tagName)(0,l.f)(e,i),i.dispatchEvent(e);else if("KOL-FORM"===i.tagName){(0,l.f)(e,l.K.querySelector("form",i));const s=i;"function"==typeof(null===(t=s._on)||void 0===t?void 0:t.onReset)&&(null===(a=s._on)||void 0===a||a.onReset(e))}}},r=(e={})=>{var t,a;const n=o(e.form);if(n instanceof HTMLElement){const e=new SubmitEvent("submit",{bubbles:!0,cancelable:!0,submitter:n});if("FORM"===n.tagName)(0,l.f)(e,n),n.dispatchEvent(e),(0,s.a)()&&!1===n.noValidate&&(0,i.d)("If you have not focusable or hidden form fields in your form, you should enable noValidate for your form.",{force:!0}),"function"==typeof n.requestSubmit&&n.requestSubmit();else if("KOL-FORM"===n.tagName){(0,l.f)(e,l.K.querySelector("form",n));const i=n;"function"==typeof(null===(t=i._on)||void 0===t?void 0:t.onSubmit)&&(null===(a=i._on)||void 0===a||a.onSubmit(e))}}}},9760:(e,t,a)=>{a.d(t,{a:()=>s,v:()=>l});var i=a(4312);const s=(e,t)=>{(0,i.w)(e,"_variant",(e=>"primary"===e||"secondary"===e||"normal"===e||"danger"===e||"ghost"===e||"custom"===e),new Set(["KoliBriButtonVariant {primary, secondary, normal, danger, ghost, custom}"]),t,{defaultValue:"normal"})},l=(e,t)=>{(0,i.d)(e,"_customClass",t,{defaultValue:void 0})}},1500:(e,t,a)=>{function i(e){e.stopImmediatePropagation(),e.stopPropagation()}function s(e,t,a){t&&function(e,t,a){const i=e.dispatchEvent(function(e,t){return new CustomEvent(`kol-${e}`,{bubbles:!0,cancelable:!0,composed:!0,detail:t})}(t,a))}(t,e,a)}a.d(t,{s:()=>i,t:()=>s})},2216:(e,t,a)=>{a.d(t,{v:()=>s});var i=a(4312);const s=(e,t)=>{(0,i.a)(e,"_hasCloser",t)}},8424:(e,t,a)=>{a.d(t,{v:()=>s});var i=a(4312);const s=(e,t,a={})=>{(0,i.a)(e,"_hideLabel",t,a)}},2160:(e,t,a)=>{a.d(t,{t:()=>d});var i=a(2348),s=a(5776);const l={error:"Fehler",warning:"Warnung",info:"Hinweis",success:"Erfolg",message:"Nachricht",close:"Schließen","form-description":"Formular-Felder, die mit einem Sternchen (*) gekennzeichnet sind, sind Pflichtangaben.",of:"von",characters:"Zeichen",new:"Neu","no-entries":"Es sind keine Einträge vorhanden.","change-order":"Sortierung von {{colLabel}} ändern","action-running":"Aktion wird ausgeführt...","action-done":"Aktion abgeschlossen",pagination:"Paginierung","page-first":"Direkt zur ersten Seite","page-back":"Eine Seite zurück","page-next":"Eine Seite weiter","page-last":"Direkt zur letzten Seite","entries-per-site":"Einträge pro Seite",page:"Seite","page-current":"Seite {{page}}","page-selected":"Seite {{page}} ist ausgewählt","page-per-site":"{{entries}} Einträge pro Seite","nav-maximize":"Navigation maximieren","nav-minimize":"Navigation minimieren","logo-description":"Logo {{orgShort}}. Bundesadler mit Flaggenstab und Schriftzug {{orgLong}}","open-link-in-tab":"Öffnet in neuem Tab.","kolibri-logo":"Logo von KoliBri","table-pagination-label":"Paginierung für die Tabelle {{label}}","avatar-alt":"Avatar von {{name}}","toast-close-all":"Alle schließen",version:"Versionsnummer","error-list":"Fehlerliste","error-list-message":"Bitte korrigieren Sie folgende Fehler:"},o={error:"Error",warning:"Warning",info:"Note",success:"Success",message:"Message",close:"Close","form-description":"Form fields marked with an asterisk (*) are mandatory.",of:"of",characters:"characters",new:"New","no-entries":"No entries available.","change-order":"Change order of {{colLabel}}","action-running":"Action is running...","action-done":"Action done",pagination:"Pagination","page-first":"Directly to the first page","page-back":"One page back","page-next":"One page further","page-last":"Directly to the last page","entries-per-site":"Entries per page",page:"Page","page-current":"Page {{page}}","page-selected":"Page {{page}} is selected","page-per-site":"{{entries}} entries per page","nav-maximize":"Maximize","nav-minimize":"Minimize","logo-description":"Logo {{orgShort}}. Federal eagle with flag staff and lettering {{orgLong}}","open-link-in-tab":"Opens in new tab.","kolibri-logo":"KoliBri logo","table-pagination-label":"Pagination for table {{label}}","avatar-alt":"Avatar of {{name}}","toast-close-all":"Close all",version:"Version number","error-list":"Error list","error-list-message":"Please correct the following errors"},n=e=>Object.keys(e).reduce(((t,a)=>(t[`kol-${a}`]=e[a],t)),{}),r=new Set([e=>e("en",n(o)),e=>e("de",n(l))]);let d=(e,t)=>{const a=(0,i.g)();let s=a.translate(e,t);return s===e&&(a.addTranslations(r),s=a.translate(e,t)),s};"test"===s.p&&(d=e=>e)},5116:(e,t,a)=>{a.d(t,{i:()=>n,v:()=>r,w:()=>d});var i=a(4312),s=a(5776);const l=(e,t,a)=>{(0,s.c)(a)?e[t]=a:(0,s.i)(a,1)&&(e[t]={icon:a})},o=e=>{var t,a,i;if(null===(t=e.nextState)||void 0===t?void 0:t.has("_icons")){const t=null===(a=e.nextState)||void 0===a?void 0:a.get("_icons");null===(i=e.nextState)||void 0===i||i.set("_icons",(e=>{let t={};return(0,s.i)(e,1)?t={left:{icon:e}}:"object"==typeof e&&null!==e&&(l(t,"top",e.top),l(t,"right",e.right),l(t,"bottom",e.bottom),l(t,"left",e.left)),t})(t))}},n=e=>"object"==typeof e&&null!==e&&(void 0===e.style||(0,s.b)(e.style))&&(0,s.i)(e.icon,1),r=(e,t,a={})=>{(0,i.o)(t,(()=>{var l;try{t=(0,i.p)(t)}catch(e){}(0,i.w)(e,"_icons",(e=>null===e||(0,s.i)(e,1)||"object"==typeof e&&null!==e&&((0,s.i)(e.left,1)||n(e.left)||(0,s.i)(e.right,1)||n(e.right)||(0,s.i)(e.top,1)||n(e.top)||(0,s.i)(e.bottom,1)||n(e.bottom))),new Set(["KoliBriIcon"]),t,Object.assign(Object.assign({},a),{defaultValue:{},hooks:{afterPatch:null===(l=a.hooks)||void 0===l?void 0:l.afterPatch,beforePatch:(e,t,i,s)=>{var l,n;"function"==typeof(null===(l=a.hooks)||void 0===l?void 0:l.beforePatch)&&(null===(n=a.hooks)||void 0===n||n.beforePatch(e,t,i,s)),o(i)}}}))}))},d=(e,t)=>{(0,i.w)(e,"_iconAlign",(e=>"left"===e||"right"===e),new Set(["Alignment {left, right, top, bottom}"]),t,{hooks:{beforePatch:()=>{o(e)}}})}},4064:(e,t,a)=>{a.r(t),a.d(t,{kol_alert_wc:()=>w,kol_button_wc:()=>L,kol_heading_wc:()=>k});var i=a(1604),s=a(2160),l=a(2216),o=a(8940),n=a(1416),r=a(4312),d=a(9752),c=a(8212),h=a(9760),u=a(8424),v=a(5116),b=a(9424),_=a(8716),f=a(1500),g=a(5776),p=a(8260),m=a(2976),y=a(6104);const A=e=>(0,i.h)("kol-icon",{class:"heading-icon",_ariaLabel:"string"==typeof e.label&&e.label.length>0?"":e.ariaLabel,_icons:e.icon}),S=e=>{switch(e.type){case"error":return(0,i.h)(A,{ariaLabel:(0,s.t)("kol-error"),icon:"codicon codicon-error",label:e.label});case"info":return(0,i.h)(A,{ariaLabel:(0,s.t)("kol-info"),icon:"codicon codicon-info",label:e.label});case"warning":return(0,i.h)(A,{ariaLabel:(0,s.t)("kol-warning"),icon:"codicon codicon-warning",label:e.label});case"success":return(0,i.h)(A,{ariaLabel:(0,s.t)("kol-success"),icon:"codicon codicon-pass",label:e.label});default:return(0,i.h)(A,{ariaLabel:(0,s.t)("kol-message"),icon:"codicon codicon-comment",label:e.label})}},w=class{constructor(e){(0,i.r)(this,e),this.close=()=>{var e;void 0!==(null===(e=this._on)||void 0===e?void 0:e.onClose)&&this._on.onClose(new Event("Close"))},this.on={onClick:this.close},this.validateOnValue=e=>"object"==typeof e&&null!==e&&"function"==typeof e.onClose,this._alert=!1,this._hasCloser=!1,this._label=void 0,this._level=1,this._on=void 0,this._type="default",this._variant="msg",this.state={_level:1}}render(){var e;if(this.state._alert){try{n.L.debug(["Navigator should vibrate ...",navigator.vibrate([100,75,100,75,100])])}catch(e){n.L.debug("Navigator does not support vibration.")}setTimeout((()=>{this.validateAlert(!1)}),1e4)}return(0,i.h)(i.H,{key:"8572d45604a797b6813eeb2542f98625bd2e35ba",class:{"kol-alert-wc":!0,[this.state._type]:!0,[this.state._variant]:!0,hasCloser:!!this.state._hasCloser},role:this.state._alert?"alert":void 0},(0,i.h)("div",{key:"eb1b94741d30482455d3f32daa5b475d3d973d85",class:"heading"},(0,i.h)(S,{key:"3d8f6c66dbed863e3af3197dc1b88778a54507c8",label:this.state._label,type:this.state._type}),(0,i.h)("div",{key:"432113e61a23056e099ae69f5c9745d7903bd4f6"},"string"==typeof this.state._label&&(null===(e=this.state._label)||void 0===e?void 0:e.length)>0&&(0,i.h)("kol-heading-wc",{_label:this.state._label,_level:this.state._level}),"msg"===this.state._variant&&(0,i.h)("div",{class:"content"},(0,i.h)("slot",null))),this.state._hasCloser&&(0,i.h)("kol-button-wc",{class:"close",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:(0,s.t)("kol-close"),_on:this.on,_tooltipAlign:"left"})),"card"===this.state._variant&&(0,i.h)("div",{class:"content"},(0,i.h)("slot",null)))}validateAlert(e){(0,r.a)(this,"_alert",e)}validateHasCloser(e){(0,l.v)(this,e)}validateLabel(e){(0,o.v)(this,e)}validateLevel(e){(0,d.w)(this,e)}validateOn(e){this.validateOnValue(e)&&(0,r.s)(this,"_on",{onClose:e.onClose})}validateType(e){(0,r.w)(this,"_type",(e=>"string"==typeof e&&("default"===e||"error"===e||"info"===e||"success"===e||"warning"===e)),new Set("String {success, info, warning, error}"),e)}validateVariant(e){(0,r.w)(this,"_variant",(e=>"card"===e||"msg"===e),new Set("AlertVariant {card, msg}"),e)}componentWillLoad(){this.validateAlert(this._alert),this.validateHasCloser(this._hasCloser),this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on),this.validateType(this._type),this.validateVariant(this._variant)}static get watchers(){return{_alert:["validateAlert"],_hasCloser:["validateHasCloser"],_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_type:["validateType"],_variant:["validateVariant"]}}},L=class{render(){const e=(0,g.s)(this.state._label);return(0,i.h)(i.H,{key:"e85ae16ace3fe0ff535868025cdd9040ee82d3b1",class:"kol-button-wc"},(0,i.h)("button",Object.assign({key:"3f47e101d04df7aa62918e872543ad5f6ed88a4b",ref:this.catchRef,accessKey:this.state._accessKey,"aria-controls":this.state._ariaControls,"aria-current":(0,r.l)(this.state._ariaCurrent),"aria-expanded":(0,r.i)(this.state._ariaExpanded),"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-selected":(0,r.l)(this.state._ariaSelected),class:{button:!0,[this.state._variant]:"custom"!==this.state._variant,[this.state._customClass]:"custom"===this.state._variant&&"string"==typeof this.state._customClass&&this.state._customClass.length>0,"icon-only":!0===this.state._hideLabel,"hide-label":!0===this.state._hideLabel},disabled:this.state._disabled,id:this.state._id,name:this.state._name},this.state._on,{onClick:this.onClick,role:this.state._role,tabIndex:this.state._tabIndex,type:this.state._type}),(0,i.h)("kol-span-wc",{key:"918fdf1e8df51210bd20a60b11dff8951514ea6d",class:"button-inner",_icons:this.state._icons,_hideLabel:this.state._hideLabel,_label:e?"":this.state._label},(0,i.h)("slot",{key:"c3fcf66022705edd0c83610f0886e370c5cb7755",name:"expert",slot:"expert"}))),(0,i.h)("kol-tooltip-wc",{key:"e7ce8623ea74c1c85a1704204371d140bee8b442","aria-hidden":"true",hidden:e||!this.state._hideLabel,_align:this.state._tooltipAlign,_label:"string"==typeof this.state._label?this.state._label:""}))}constructor(e){(0,i.r)(this,e),this.catchRef=e=>{this.ref=e,(0,g.a)(this.host,this.ref)},this.onClick=e=>{var t,a;"submit"===this.state._type?(0,m.p)({form:this.host,ref:this.ref}):"reset"===this.state._type?(0,m.a)({form:this.host,ref:this.ref}):((0,f.s)(e),(0,f.t)("click",this.host,this.state._value),this.controller.setFormAssociatedValue(this.state._value),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onClick)&&((0,r.f)(e,this.ref),null===(a=this.state._on)||void 0===a||a.onClick(e,this.state._value)))},this._accessKey=void 0,this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icon=void 0,this._icons=void 0,this._iconAlign=void 0,this._iconOnly=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._role=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal",this.state={_icons:{},_label:"…",_on:{},_type:"button",_variant:"normal"},this.controller=new y.A(this,"button",this.host)}validateAccessKey(e){(0,r.d)(this,"_accessKey",e)}validateAriaControls(e){(0,c.v)(this,e)}validateAriaCurrent(e){(0,c.a)(this,e)}validateAriaExpanded(e){((e,t)=>{(0,r.a)(e,"_ariaExpanded",t)})(this,e)}validateAriaLabel(e){this.validateLabel(e)}validateAriaSelected(e){(0,r.a)(this,"_ariaSelected",e)}validateCustomClass(e){(0,h.v)(this,e)}validateDisabled(e){((e,t)=>{(0,r.a)(e,"_disabled",t)})(this,e),!0===e&&(0,_.g)()}validateHideLabel(e){(0,u.v)(this,e)}validateIcon(e){(0,v.v)(this,e)}validateIcons(e){(0,v.v)(this,e)}validateIconAlign(e){(0,v.w)(this,e)}validateIconOnly(e){this.validateHideLabel(e)}validateId(e){(0,r.d)(this,"_id",e)}validateLabel(e){(0,o.a)(this,e,{required:!0})}validateName(e){this.controller.validateName(e)}validateOn(e){((e,t)=>{(0,r.w)(e,"_on",(e=>"object"==typeof e&&null!==e),new Set(["ButtonCallbacksPropType {Events.onClick, Events.onMouseDown}"]),t)})(this,e)}validateRole(e){(0,c.c)(this,e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){(0,p.v)(this,e)}validateTooltipAlign(e){(0,b.v)(this,e)}validateType(e){((e,t)=>{(0,r.w)(e,"_type",(e=>"button"===e||"reset"===e||"submit"===e),new Set(["KoliBriButtonType {button, reset, submit}"]),t)})(this,e)}validateValue(e){(0,r.s)(this,"_value",e),this.controller.setFormAssociatedValue(this.state._value)}validateVariant(e){(0,h.a)(this,e)}componentWillLoad(){var e;this.validateAccessKey(this._accessKey),this.validateAriaControls(this._ariaControls),this.validateAriaCurrent(this._ariaCurrent),this.validateAriaExpanded(this._ariaExpanded),this.validateAriaSelected(this._ariaSelected),this.validateCustomClass(this._customClass),this.validateDisabled(this._disabled),this.validateHideLabel(this._hideLabel||this._iconOnly),this.validateIcons(this._icons||this._icon),this.validateIconAlign(this._iconAlign),this.validateId(this._id),this.validateLabel(null!==(e=this._label)&&void 0!==e?e:this._ariaLabel),this.validateName(this._name),this.validateOn(this._on),this.validateRole(this._role),this.validateSyncValueBySelector(this._syncValueBySelector),this.validateTabIndex(this._tabIndex),this.validateTooltipAlign(this._tooltipAlign),this.validateType(this._type),this.validateValue(this._value),this.validateVariant(this._variant)}get host(){return(0,i.g)(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_ariaControls:["validateAriaControls"],_ariaCurrent:["validateAriaCurrent"],_ariaExpanded:["validateAriaExpanded"],_ariaLabel:["validateAriaLabel"],_ariaSelected:["validateAriaSelected"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_hideLabel:["validateHideLabel"],_icon:["validateIcon"],_icons:["validateIcons"],_iconAlign:["validateIconAlign"],_iconOnly:["validateIconOnly"],_id:["validateId"],_label:["validateLabel"],_name:["validateName"],_on:["validateOn"],_role:["validateRole"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_tooltipAlign:["validateTooltipAlign"],_type:["validateType"],_value:["validateValue"],_variant:["validateVariant"]}}},k=class{constructor(e){(0,i.r)(this,e),this.renderHeadline=(e,t)=>{switch(t){case 1:return(0,i.h)("h1",{class:"headline"},e,(0,i.h)("slot",null));case 2:return(0,i.h)("h2",{class:"headline"},e,(0,i.h)("slot",null));case 3:return(0,i.h)("h3",{class:"headline"},e,(0,i.h)("slot",null));case 4:return(0,i.h)("h4",{class:"headline"},e,(0,i.h)("slot",null));case 5:return(0,i.h)("h5",{class:"headline"},e,(0,i.h)("slot",null));case 6:return(0,i.h)("h6",{class:"headline"},e,(0,i.h)("slot",null));default:return(0,i.h)("strong",{class:"headline"},e,(0,i.h)("slot",null))}},this.renderSecondaryHeadline=(e,t)=>{switch(t){case 1:return(0,i.h)("span",{class:"secondary-headline"},e);case 2:return(0,i.h)("h2",{class:"secondary-headline"},e);case 3:return(0,i.h)("h3",{class:"secondary-headline"},e);case 4:return(0,i.h)("h4",{class:"secondary-headline"},e);case 5:return(0,i.h)("h5",{class:"secondary-headline"},e);case 6:return(0,i.h)("h6",{class:"secondary-headline"},e);default:return(0,i.h)("strong",{class:"secondary-headline"},e)}},this._label=void 0,this._level=1,this._secondaryHeadline=void 0,this.state={_label:"…",_level:1}}validateLabel(e){(0,o.a)(this,e,{defaultValue:"…"})}validateLevel(e){(0,d.w)(this,e)}validateSecondaryHeadline(e){(0,r.d)(this,"_secondaryHeadline",e)}componentWillLoad(){this.validateLabel(this._label),this.validateLevel(this._level),this.validateSecondaryHeadline(this._secondaryHeadline)}render(){return(0,i.h)(i.H,{key:"c319e85e75d3e24a2aed421956aaa1388ef49775",class:"kol-heading-wc"},"string"==typeof this.state._secondaryHeadline&&this.state._secondaryHeadline.length>0?(0,i.h)("hgroup",null,this.renderHeadline(this.state._label,this.state._level),this.state._secondaryHeadline&&this.renderSecondaryHeadline(this.state._secondaryHeadline,this.state._level+1)):this.renderHeadline(this.state._label,this.state._level))}static get watchers(){return{_label:["validateLabel"],_level:["validateLevel"],_secondaryHeadline:["validateSecondaryHeadline"]}}}},8940:(e,t,a)=>{a.d(t,{a:()=>h,c:()=>r,h:()=>n,v:()=>c});var i=a(8716),s=a(4312);const l=/[a-zA-Z0-9äöüÄÖÜß]/g,o=/^\d+$/;function n(e,t=1){return function(e){var t;return"string"==typeof e&&(null===(t=e.match(l))||void 0===t?void 0:t.length)||0}(e)>=t}function r(e){return o.test(e)}const d=new Set(["string"]),c=(e,t,a={})=>{(0,s.w)(e,"_label",(e=>"string"==typeof e),d,t,function(e){var t;return Object.assign(Object.assign({},e),{hooks:{afterPatch:(t,a,s,l)=>{var o,d;"function"==typeof(null===(o=e.hooks)||void 0===o?void 0:o.afterPatch)&&(null===(d=e.hooks)||void 0===d||d.afterPatch(t,a,s,l)),"string"==typeof t&&!1===n(t,3)&&!1===r(t)&&(0,i.a)(`The heading or label ("${t}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof t&&t.length>80&&(0,i.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(t=e.hooks)||void 0===t?void 0:t.beforePatch}})}(a))},h=c},8260:(e,t,a)=>{a.d(t,{v:()=>o});var i=a(8716),s=a(4312);const l={hooks:{afterPatch:e=>{-1!==e&&0!==e&&(0,i.a)("Don’t Use Tabindex Greater than 0: https://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html")}}},o=(e,t)=>{(0,s.e)(e,"_tabIndex",t,l)}},9424:(e,t,a)=>{a.d(t,{v:()=>s});var i=a(3308);const s=(e,t)=>{(0,i.v)(e,"_tooltipAlign",t)}},9752:(e,t,a)=>{a.d(t,{w:()=>s});var i=a(4312);const s=(e,t)=>{(0,i.w)(e,"_level",(e=>"number"==typeof e&&0<=e&&e<=6),new Set(["Number {0, 1, 2, 3, 4, 5, 6}"]),t,{defaultValue:1,required:!0})}}}]);

package/dist/408.js

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