@public-ui/sample-react 2.2.6 → 2.2.7-rc.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "2.2.6",
+  "version": "2.2.7-rc.0",
   "description": "This app contains samples for the KoliBri/Public UI",
   "license": "EUPL-1.2",
   "repository": {
@@ -36,9 +36,9 @@
     "typescript": "5.7.3",
     "world_countries_lists": "2.9.0",
     "yup": "1.6.1",
-    "@public-ui/components": "2.2.6",
-    "@public-ui/react": "2.2.6",
-    "@public-ui/themes": "2.2.6"
+    "@public-ui/themes": "2.2.7-rc.0",
+    "@public-ui/react": "2.2.7-rc.0",
+    "@public-ui/components": "2.2.7-rc.0"
   },
   "files": [
     ".eslintignore",

package/public/assets/material-icons/css/_mixins.scss

@@ -1,4 +1,4 @@
-@import '../iconfont/mixins';
+@use '../iconfont/mixins' as *;
 
 @function material-icons-content($codepoint) {
   @return unquote('"\\#{$codepoint}"');
@@ -10,4 +10,4 @@
   &::#{$pseudo} {
     content: material-icons-content($codepoint);
   }
-}
+}

package/public/assets/material-icons/css/_variables.scss

@@ -1,6 +1,6 @@
-@import '../iconfont/variables';
-@import 'codepoints';
+@use '../iconfont/variables' as *;
+@use 'codepoints' as *;
 
 $material-icons-css-prefix: 'mi' !default;
 $material-icons-css-search: '_' !default;
-$material-icons-css-replace: '-' !default;
+$material-icons-css-replace: '-' !default;

package/public/assets/material-icons/css/material-icons.scss

@@ -1,22 +1,18 @@
-@import 'variables';
-@import 'mixins';
+@use 'variables' as *;
+@use 'mixins' as *;
 
-@each $font-family
-  in (
-    'Material Icons',
-    'Material Icons Outlined',
-    'Material Icons Round',
-    'Material Icons Sharp',
-    'Material Icons Two Tone'
-  )
-{
+@each $font-family in ('Material Icons',
+  'Material Icons Outlined',
+  'Material Icons Round',
+  'Material Icons Sharp',
+  'Material Icons Two Tone'
+
+) {
   $full-class-name: to-lower-case($font-family);
   $full-class-name: material-icons-str-replace($full-class-name, ' ', '-');
-  $class-name: material-icons-str-replace(
-    $full-class-name,
-    'material-icons',
-    $material-icons-css-prefix
-  );
+  $class-name: material-icons-str-replace($full-class-name,
+      'material-icons',
+      $material-icons-css-prefix );
 
   /**
    * @deprecated As of 1.0, use .#{$full-class-name} instead of .#{$class-name}
@@ -27,13 +23,11 @@
 }
 
 @each $name, $codepoint in $material-icons-codepoints {
-  $class-name: material-icons-str-replace(
-    $name,
-    $material-icons-css-search,
-    $material-icons-css-replace
-  );
+  $class-name: material-icons-str-replace($name,
+      $material-icons-css-search,
+      $material-icons-css-replace );
 
   .#{$material-icons-css-prefix}-#{$class-name} {
     @include material-icon($name);
   }
-}
+}

package/public/assets/material-icons/iconfont/filled.scss

@@ -1,4 +1,4 @@
-@import 'variables';
-@import 'mixins';
+@use 'variables' as *;
+@use 'mixins' as *;
 
-@include material-icons-font('Material Icons');
+@include material-icons-font('Material Icons');

package/public/assets/material-icons/iconfont/material-icons.scss

@@ -1,5 +1,5 @@
-@import 'filled';
-@import 'outlined';
-@import 'round';
-@import 'sharp';
-@import 'two-tone';
+@use 'filled' as *;
+@use 'outlined' as *;
+@use 'round' as *;
+@use 'sharp' as *;
+@use 'two-tone' as *;

package/public/assets/material-icons/iconfont/outlined.scss

@@ -1,4 +1,4 @@
-@import 'variables';
-@import 'mixins';
+@use 'variables' as *;
+@use 'mixins' as *;
 
-@include material-icons-font('Material Icons Outlined');
+@include material-icons-font('Material Icons Outlined');

package/public/assets/material-icons/iconfont/round.scss

@@ -1,4 +1,4 @@
-@import 'variables';
-@import 'mixins';
+@use 'variables' as *;
+@use 'mixins' as *;
 
-@include material-icons-font('Material Icons Round');
+@include material-icons-font('Material Icons Round');

package/public/assets/material-icons/iconfont/sharp.scss

@@ -1,4 +1,4 @@
-@import 'variables';
-@import 'mixins';
+@use 'variables' as *;
+@use 'mixins' as *;
 
-@include material-icons-font('Material Icons Sharp');
+@include material-icons-font('Material Icons Sharp');

package/public/assets/material-icons/iconfont/two-tone.scss

@@ -1,4 +1,4 @@
-@import 'variables';
-@import 'mixins';
+@use 'variables' as *;
+@use 'mixins' as *;
 
-@include material-icons-font('Material Icons Two Tone');
+@include material-icons-font('Material Icons Two Tone');

package/public/assets/material-symbols/index.scss

@@ -1,3 +1,3 @@
-@import 'outlined';
-@import 'rounded';
-@import 'sharp';
+@use 'outlined' as *;
+@use 'rounded' as *;
+@use 'sharp' as *;

package/public/assets/material-symbols/outlined.scss

@@ -1,3 +1,3 @@
-@import 'core';
+@use 'core' as *;
 
-@include material-symbols-font('Material Symbols Outlined');
+@include material-symbols-font('Material Symbols Outlined');

package/public/assets/material-symbols/rounded.scss

@@ -1,3 +1,3 @@
-@import 'core';
+@use 'core' as *;
 
-@include material-symbols-font('Material Symbols Rounded');
+@include material-symbols-font('Material Symbols Rounded');

package/public/assets/material-symbols/sharp.scss

@@ -1,3 +1,3 @@
-@import 'core';
+@use 'core' as *;
 
-@include material-symbols-font('Material Symbols Sharp');
+@include material-symbols-font('Material Symbols Sharp');

package/src/components/input-radio/partials/variants.tsx

@@ -3,17 +3,19 @@ import React, { forwardRef } from 'react';
 import { InputRadioCases } from './cases';
 
 import type { Components } from '@public-ui/components';
+import { KolHeading } from '@public-ui/react';
+
 export const InputRadioVariants = forwardRef<HTMLKolInputRadioElement, Components.KolInputRadio>(function InputRadioVariant(props, ref) {
 	return (
 		<div className="grid md:grid-cols-2 gap-4">
-			<fieldset>
-				<legend>Radio</legend>
+			<div className="border border-solid border-dark-100 p-3">
+				<KolHeading _level={2} _label="Radio" className="block mb-2" />
 				<InputRadioCases {...props} />
-			</fieldset>
-			<fieldset>
-				<legend>Radio (hideLabel)</legend>
+			</div>
+			<div className="border border-solid border-dark-100 p-3">
+				<KolHeading _level={2} _label="Radio (hideLabel)" className="block mb-2" />
 				<InputRadioCases ref={ref} {...props} _hideLabel />
-			</fieldset>
+			</div>
 		</div>
 	);
 });

package/src/components/popover-button/basic.tsx

@@ -0,0 +1,55 @@
+import type { FC } from 'react';
+import { useContext } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+import { KolButton, KolPopoverButton, KolBadge } from '@public-ui/react';
+import { useToasterService } from '../../hooks/useToasterService';
+import { HideMenusContext } from '../../shares/HideMenusContext';
+
+export const PopoverButtonBasic: FC = () => {
+	const hideMenus = useContext(HideMenusContext);
+	const { dummyClickEventHandler } = useToasterService();
+
+	const dummyEventHandler = {
+		onClick: dummyClickEventHandler,
+	};
+
+	return (
+		<>
+			<SampleDescription>
+				<p>
+					The PopoverButton component combines a button with a popover that appears when clicked. The popover can be positioned in different directions (top,
+					right, bottom, left) using the <code>_popoverAlign</code> prop.
+				</p>
+			</SampleDescription>
+			{!hideMenus && <KolBadge className="block mb-3" _label="Component is a DRAFT - Don't use in production yet." _color="#db5461" />}
+
+			<div className="flex flex-wrap gap-4">
+				<KolPopoverButton _label={'Open popover'} _variant="primary" _icons={{ right: 'codicon codicon-chevron-down' }}>
+					<KolButton _label="Button within popover" _variant="primary" _on={dummyEventHandler} />
+					<br />
+					<br />
+					<KolButton _label="Second Button within popover" _on={dummyEventHandler} />
+				</KolPopoverButton>
+
+				<KolPopoverButton _label="Open popover" _popoverAlign="right" _icons={{ right: 'codicon codicon-chevron-right' }}>
+					<p className="w-sm">
+						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur aut dolore dolores itaque praesentium reprehenderit sed voluptatum!
+						Exercitationem ipsa magni maiores modi, placeat quas quos reprehenderit rerum sit veniam vitae.
+					</p>
+				</KolPopoverButton>
+
+				<KolPopoverButton _label="icon-only with tooltip" _icons="codicon codicon-info" _tooltipAlign="right" _hideLabel>
+					This is an explanation shown on click.
+				</KolPopoverButton>
+
+				<KolPopoverButton _label="">
+					<span slot="expert">
+						<u>Expert slot content</u>
+					</span>
+					This sample illustrates a button with expert slot.
+				</KolPopoverButton>
+			</div>
+		</>
+	);
+};

package/src/components/popover-button/routes.ts

@@ -0,0 +1,8 @@
+import { Routes } from '../../shares/types';
+import { PopoverButtonBasic } from './basic';
+
+export const POPOVER_BUTTON_ROUTES: Routes = {
+	'popover-button': {
+		basic: PopoverButtonBasic,
+	},
+};

package/src/components/progress/basic.tsx

@@ -11,11 +11,18 @@ export const ProgressBasic: FC = () => (
 			<p>KolProgress renders a progress indicator. The sample shows the variants &quot;bar&quot; and &quot;cycle&quot; with and without labels.</p>
 		</SampleDescription>
 
-		<div className="grid gap-4">
-			<KolProgress _variant="bar" _max={100} _value={0} _label="With label"></KolProgress>
-			<KolProgress _variant="bar" _max={100} _value={33}></KolProgress>
-			<KolProgress _variant="bar" _max={100} _value={100}></KolProgress>
-			<KolProgress _variant="cycle" _max={100} _value={33}></KolProgress>
+		<div className="grid gap-4 grid-cols-1 sm:grid-cols-2">
+			<fieldset title="Percentages" className="flex flex-col gap-4">
+				<KolProgress _variant="bar" _max={100} _value={0}></KolProgress>
+				<KolProgress _variant="bar" _max={100} _value={17}></KolProgress>
+				<KolProgress _variant="bar" _max={100} _value={100}></KolProgress>
+				<KolProgress _variant="cycle" _max={100} _value={85}></KolProgress>
+			</fieldset>
+			<fieldset title="Custom units" className="flex flex-col gap-4">
+				<KolProgress _label="Distance" _variant="bar" _max={65434} _value={7236} _unit="m"></KolProgress>
+				<KolProgress _label="12 Tasks to do" _variant="bar" _max={12} _value={5} _unit="tasks completed"></KolProgress>
+				<KolProgress _label="Max 150 kg" _variant="cycle" _max={150} _value={134} _unit="kg"></KolProgress>
+			</fieldset>
 		</div>
 	</>
 );

package/src/components/single-select/partials/cases.tsx

@@ -36,6 +36,7 @@ export const SingleSelectCases = forwardRef<HTMLKolSingleSelectElement, Componen
 			/>
 			<KolSingleSelect {...props} _label="With access key" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} _accessKey="c" />
 			<KolSingleSelect {...props} _label="With short key" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} _shortKey="s" />
+			<KolSingleSelect {...props} _label="With hidden clear button" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} _hideClearButton />
 		</div>
 	);
 });

package/src/scenarios/horizontal-scrollbar-advanced/layout.scss

@@ -1,4 +1,4 @@
-@import '../../@shared/mixins';
+@use '../../@shared/mixins' as *;
 
 .mainlayout {
 	min-height: calc(100vh - rem(32));
@@ -9,11 +9,11 @@
 	grid-template-rows: 1fr;
 	grid-template-areas: 'nav content';
 
-	& > .nav-area {
+	&>.nav-area {
 		grid-area: nav;
 	}
 
-	& > .content {
+	&>.content {
 		grid-area: content;
 	}
-}
+}

package/src/shares/routes.ts

@@ -1,3 +1,4 @@
+import { Routes } from './types';
 import { ABBR_ROUTES } from '../components/abbr/routes';
 import { ACCORDION_ROUTES } from '../components/accordion/routes';
 import { ALERT_ROUTES } from '../components/alert/routes';
@@ -8,6 +9,7 @@ import { BUTTON_GROUP_ROUTES } from '../components/button-group/routes';
 import { BUTTON_LINK_ROUTES } from '../components/button-link/routes';
 import { BUTTON_ROUTES } from '../components/button/routes';
 import { CARD_ROUTES } from '../components/card/routes';
+import { COMBOBOX_ROUTES } from '../components/combobox/routes';
 import { DETAILS_ROUTES } from '../components/details/routes';
 import { DRAWER_ROUTES } from '../components/drawer/routes';
 import { FORM_ROUTES } from '../components/form/routes';
@@ -33,9 +35,12 @@ import { LINK_ROUTES } from '../components/link/routes';
 import { MODAL_ROUTES } from '../components/modal/routes';
 import { NAV_ROUTES } from '../components/nav/routes';
 import { PAGINATION_ROUTES } from '../components/pagination/routes';
+import { POPOVER_BUTTON_ROUTES } from '../components/popover-button/routes';
 import { PROGRESS_ROUTES } from '../components/progress/routes';
 import { QUOTE_ROUTES } from '../components/quote/routes';
+import { SCENARIO_ROUTES } from '../scenarios/routes';
 import { SELECT_ROUTES } from '../components/select/routes';
+import { SINGLE_SELECT_ROUTES } from '../components/single-select/routes';
 import { SKIP_NAV_ROUTES } from '../components/skip-nav/routes';
 import { SPIN_ROUTES } from '../components/spin/routes';
 import { SPLIT_BUTTON_ROUTES } from '../components/split-button/routes';
@@ -44,15 +49,10 @@ import { TABS_ROUTES } from '../components/tabs/routes';
 import { TEXTAREA_ROUTES } from '../components/textarea/routes';
 import { TOAST_ROUTES } from '../components/toast/routes';
 import { TOOLBAR_ROUTES } from '../components/toolbar/routes';
-import { VERSION_ROUTES } from '../components/version/routes';
-import { SCENARIO_ROUTES } from '../scenarios/routes';
-import { Routes } from './types';
 import { TREE_ROUTES } from '../components/tree/routes';
-import { COMBOBOX_ROUTES } from '../components/combobox/routes';
-import { SINGLE_SELECT_ROUTES } from '../components/single-select/routes';
+import { VERSION_ROUTES } from '../components/version/routes';
 
 export const ROUTES: Routes = {
-	...HANDOUT_ROUTES,
 	...ABBR_ROUTES,
 	...ACCORDION_ROUTES,
 	...ALERT_ROUTES,
@@ -67,6 +67,7 @@ export const ROUTES: Routes = {
 	...DETAILS_ROUTES,
 	...DRAWER_ROUTES,
 	...FORM_ROUTES,
+	...HANDOUT_ROUTES,
 	...HEADING_ROUTES,
 	...ICON_ROUTES,
 	...IMAGE_ROUTES,
@@ -88,13 +89,15 @@ export const ROUTES: Routes = {
 	...MODAL_ROUTES,
 	...NAV_ROUTES,
 	...PAGINATION_ROUTES,
+	...POPOVER_BUTTON_ROUTES,
 	...PROGRESS_ROUTES,
 	...QUOTE_ROUTES,
+	...SCENARIO_ROUTES,
 	...SELECT_ROUTES,
 	...SELECT_ROUTES,
+	...SINGLE_SELECT_ROUTES,
 	...SKIP_NAV_ROUTES,
 	...SPIN_ROUTES,
-	...SINGLE_SELECT_ROUTES,
 	...SPLIT_BUTTON_ROUTES,
 	...TABLE_ROUTES,
 	...TABS_ROUTES,
@@ -103,5 +106,4 @@ export const ROUTES: Routes = {
 	...TOOLBAR_ROUTES,
 	...TREE_ROUTES,
 	...VERSION_ROUTES,
-	...SCENARIO_ROUTES,
 };

package/src/style.scss

@@ -1,4 +1,4 @@
-@import './@shared/mixins';
+@use './@shared/mixins' as *;
 
 :root {
 	--kolibri-root-font-size: 100;
@@ -50,7 +50,7 @@ hr {
 	}
 
 	.app-sidebar {
-		border-right: rem(1) solid gray;
+		border-right: 1px solid gray;
 		position: relative;
 
 		& .scrollable-container-wrapper {

package/dist/6616.js

@@ -1,2 +0,0 @@
-/*! For license information please see 6616.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[6616],{3283:(e,t,i)=>{i.d(t,{i:()=>s,n:()=>c,r:()=>a});var o=i(8594),n=i(7177),r=i(5838);const l=()=>{let e=(0,r.d)().KoliBri;return void 0===e&&(e={},Object.defineProperty((0,r.d)(),"KoliBri",{value:e,writable:!1})),e},s=()=>{(()=>{const e=(0,r.g)().querySelector('meta[name="kolibri"]');if(e&&e.hasAttribute("content")){const t=e.getAttribute("content");"string"==typeof t&&((0,r.s)(t.includes("dev-mode=true")),(0,r.b)(t.includes("experimental-mode=true")),(0,r.c)(t.includes("color-contrast-analysis=true")))}})(),r.L.debug(`\n,--. ,--.         ,--. ,--. ,-----.           ,--.\n|  .'   /  ,---.  |  | \`--' |  |) /_  ,--.--. \`--'\n|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.\n|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |\n\`--' \`--´  \`---´  \`--' \`--' \`------´  \`--'    \`--'\n🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | ${o.E.kolibriVersion}\n\t`,{forceLog:!0})},a=()=>{!0!==l().adviceShown&&(Object.defineProperty(l(),"adviceShown",{get:function(){return!0}}),r.L.debug("\nYou are using the KoliBri component library. If you have any suggestions for improvement or find a problem, please contact us:\n\nTicket: https://github.com/public-ui/kolibri/issues/new/choose (for privacy reasons, please use email)\nEmail: kolibri@itzbund.de\n"))};let c=()=>Math.floor(16777215*Math.random()).toString(16);"test"===n.p&&(c=()=>"nonce")},6616:(e,t,i)=>{i.r(t),i.d(t,{initialize:()=>a});var o=i(3283),n=i(5838),r=i(1722);function l(e,t){try{Object.defineProperty((()=>{let e=(0,n.d)().KoliBri;return void 0===e&&(e={},Object.defineProperty((0,n.d)(),"KoliBri",{value:e,writable:!1})),e})(),e,{get:function(){return t}})}catch(t){n.L.debug(`KoliBri property ${e} is already bind.`)}}const s=(e,t)=>n.L.debug(`${e} ${t?"":"not "}activated`),a=()=>{if((0,o.i)(),(0,n.e)()){(0,o.r)(),l("a11yColorContrast",r.z),l("querySelector",r.v),l("querySelectorAll",r.A),l("querySelectorColors",r.B),l("utils",(function(){return r.C})),l("parseJson",r.p),l("stringifyJson",r.D);const e=(0,n.g)().body,t=(0,n.g)().createElement("svg");if(t.setAttribute("aria-label","KoliBri-DevTools"),t.setAttribute("xmlns","http://www.w3.org/2000/svg"),t.setAttribute("role","toolbar"),t.setAttribute("style","position: fixed;color: black;font-size: 200%;bottom: 0.25rem;right: 0.25rem;"),t.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,n.g)().body.appendChild(t),s("Development mode",(0,n.e)()),s("Experimental mode",(0,n.a)()),s("Color contrast analysis",(0,n.f)()),(0,n.f)()){const t=setTimeout((()=>{clearTimeout(t),setInterval((()=>{r.C.queryHtmlElementColors((0,n.g)().createElement("div"),(0,r.z)(e),!1,!1)}),1e4)}),2500)}}}},7177:(e,t,i)=>{i.d(t,{b:()=>l,h:()=>n,p:()=>o,s:()=>r});let o="development";try{o="production"}catch(e){o="production"}const n=(e,t,i)=>{if(e&&t&&"string"==typeof i){const o=e.querySelector(`[slot="${i}"]`);o&&t.appendChild(o)}},r=e=>""===e,l=(e,t)=>e||t||""}}]);

package/dist/7322.js

@@ -1,2 +0,0 @@
-/*! For license information please see 7322.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[7322],{4590:(t,e,o)=>{o.d(e,{I:()=>i});var n=o(8594);const i=({badgeText:t,label:e})=>{const o=t;let[i,...s]=e.split(o);return 0===s.length&&(t=o.toUpperCase(),[i,...s]=e.split(o)),0===s.length&&(t=o.toLowerCase(),[i,...s]=e.split(o)),(0,n.h)(n.F,null,i,s.length?(0,n.h)(n.F,null,(0,n.h)("u",null,t),s.join(o)):null)}},2309:(t,e,o)=>{o.d(e,{a:()=>l,b:()=>r,c:()=>a,v:()=>i});var n=o(1722);const i=(t,e)=>{(0,n.i)(t,"_accessKey",e)},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,n.k)(t,"_tabIndex",e,s)},r=(t,e)=>{(0,n.i)(t,"_shortKey",e)},l=(t,e)=>{if(t&&e)throw new Error("AccessKey and ShortKey are used. Only one is allowed.")}},5683:(t,e,o)=>{o.d(e,{a:()=>a,v:()=>i});var n=o(1722);const i=(t,e,o)=>{(0,n.w)(t,e,(t=>"string"==typeof t&&s.includes(t)),new Set(s),o,{defaultValue:"top"})},s=["left","right","top","bottom"],a=(t,e)=>{i(t,"_align",e)}},148:(t,e,o)=>{o.d(e,{A:()=>s});var n=o(5838),i=o(1722);class s{constructor(t,e,o){var s,a,r,l;if(this.experimentalMode=(0,n.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.j)(` 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"===(l=null===(s=this.host)||void 0===s?void 0:s.tagName)||"KOL-COMBOBOX"===l||"KOL-INPUT-CHECKBOX"===l||"KOL-INPUT-COLOR"===l||"KOL-INPUT-DATE"===l||"KOL-INPUT-EMAIL"===l||"KOL-INPUT-FILE"===l||"KOL-INPUT-NUMBER"===l||"KOL-INPUT-PASSWORD"===l||"KOL-INPUT-RADIO"===l||"KOL-INPUT-RANGE"===l||"KOL-INPUT-TEXT"===l||"KOL-SELECT"===l||"KOL-SINGLE-SELECT"===l||"KOL-TEXTAREA"===l)&&t._name){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("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.l)(`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;case"radio":"string"==typeof e&&(o.setAttribute("value",e),o.setAttribute("checked",""),o.value=e);break;default:"string"==typeof e?(o.setAttribute("value",e),o.value=e):(o.removeAttribute("value"),o.value="")}}validateName(t){((t,e,o)=>{(0,i.i)(t,"_name",e,o)})(this.component,t,{hooks:{afterPatch:()=>{this.setAttribute("name",this.formAssociated,this.component.state._name)}}}),void 0===t&&(0,i.j)("A name on input fields or switches is not strictly required, but it might be relevant for the autocomplete function and for the static submission of the input field.")}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)}}},7257:(t,e,o)=>{o.d(e,{S:()=>a,a:()=>n,b:()=>s,i:()=>i});const n=t=>"object"==typeof t&&null!==t,i=(t,e=0)=>"string"==typeof t&&t.length>=e,s=t=>{if("object"!=typeof t||null===t)return i(t,1);for(const e in t)if(!1===i(e,1))return!1;return!0},a=new Event("StateChange")},8669:(t,e,o)=>{o.d(e,{I:()=>p,g:()=>d});var n=o(8445),i=o(148),s=o(1722),a=o(2309),r=o(8463),l=o(472),c=o(7257),h=o(3589);const d=t=>{var e,o;const n=Boolean("error"===(null===(e=t._msg)||void 0===e?void 0:e._type)&&t._msg._description&&(null===(o=t._msg._description)||void 0===o?void 0:o.length)>0)&&!0===t._touched,i="string"==typeof t._hint&&t._hint.length>0,s=[];return!0===n&&s.push(`${t._id}-error`),!0===i&&s.push(`${t._id}-hint`),{hasError:n,hasHint:i,ariaDescribedBy:s}};class u extends i.A{constructor(t,e,o){super(t,e,o),this.component=t}validateAlert(t){(0,s.b)(this.component,"_alert",t)}validateTouched(t){((t,e)=>{(0,s.b)(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),onInput:this.onInput.bind(this)},this.component=t}validateAccessKey(t){(0,a.v)(this.component,t),(0,a.a)(t,this.component._shortKey)}validateAdjustHeight(t){((t,e)=>{(0,s.b)(t,"_adjustHeight",e)})(this.component,t)}validateDisabled(t){(0,s.b)(this.component,"_disabled",t),!0===t&&(0,s.c)()}validateTooltipAlign(t){(0,h.v)(this.component,t)}validateError(t){"string"==typeof t&&t.length>0?this.validateMsg({_description:t,_type:"error"}):this.validateMsg(void 0)}validateHideError(t){((t,e,o)=>{(0,s.b)(t,"_hideError",e,o)})(this.component,t,{hooks:{afterPatch:()=>{this.component.state._hideError&&(0,s.a)("Property hide-error for inputs: Only use when the error message is shown outside of the input component.")}}})}validateHideLabel(t){(0,r.v)(this.component,t,{hooks:{afterPatch:()=>{this.component.state._hideLabel&&(0,s.a)("Property hide-label for inputs: Only use for exceptions like search inputs that are clearly identifiable by their context.")}}})}validateHint(t){(0,s.i)(this.component,"_hint",t)}validateId(t){(0,s.i)(this.component,"_id",t,{minLength:1}),""!==t&&void 0!==t||(0,s.j)("A unique ID on the input fields is not strictly required, but it might be relevant for E2E tests.")}validateLabel(t){(0,l.a)(this.component,t,{required:!0})}validateMsg(t){((t,e)=>{(0,s.o)(e,(()=>{try{e=(0,s.p)(e)}catch(t){}(0,s.w)(t,"_msg",(t=>(0,c.a)(t)&&"string"==typeof(null==t?void 0:t._description)),new Set(["MsgPropType"]),e,{defaultValue:{_description:"",_type:"error"}})}))})(this.component,t)}validateOn(t){"object"==typeof t&&(0,s.s)(this.component,"_on",t)}validateShortKey(t){(0,a.b)(this.component,t),(0,a.a)(this.component._accessKey,t)}validateSmartButton(t){(0,s.o)(t,(()=>{try{t=(0,s.p)(t)}catch(t){}(0,s.s)(this.component,"_smartButton",t)}))}validateTabIndex(t){(0,a.c)(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateAccessKey(this.component._accessKey),this.validateAdjustHeight(this.component._adjustHeight),this.validateError(this.component._error),this.component._msg&&this.validateMsg(this.component._msg),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.validateShortKey(this.component._shortKey),this.validateSmartButton(this.component._smartButton),this.validateOn(this.component._on),this.validateTabIndex(this.component._tabIndex),(0,a.a)(this.component._accessKey,this.component._shortKey)}onBlur(t){var e;this.component._touched=!0,(0,n.s)(t),(0,n.t)("blur",this.host),"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onBlur)&&this.component._on.onBlur(t)}onChange(t,e){var o;e=null!=e?e:t.target.value,(0,n.t)("change",this.host,e),"function"==typeof(null===(o=this.component._on)||void 0===o?void 0:o.onChange)&&this.component._on.onChange(t,e),this.valueChangeListeners.forEach((t=>t(e)))}onInput(t,e=!0,o){var i;o=null!=o?o:t.target.value,(0,n.s)(t),(0,n.t)("input",this.host,o),e&&this.setFormAssociatedValue(o),"function"==typeof(null===(i=this.component._on)||void 0===i?void 0:i.onInput)&&this.component._on.onInput(t,o)}onClick(t){var e;(0,n.s)(t),(0,n.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;(0,n.s)(t),(0,n.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)}}},3283:(t,e,o)=>{o.d(e,{i:()=>r,n:()=>c,r:()=>l});var n=o(8594),i=o(7177),s=o(5838);const a=()=>{let t=(0,s.d)().KoliBri;return void 0===t&&(t={},Object.defineProperty((0,s.d)(),"KoliBri",{value:t,writable:!1})),t},r=()=>{(()=>{const t=(0,s.g)().querySelector('meta[name="kolibri"]');if(t&&t.hasAttribute("content")){const e=t.getAttribute("content");"string"==typeof e&&((0,s.s)(e.includes("dev-mode=true")),(0,s.b)(e.includes("experimental-mode=true")),(0,s.c)(e.includes("color-contrast-analysis=true")))}})(),s.L.debug(`\n,--. ,--.         ,--. ,--. ,-----.           ,--.\n|  .'   /  ,---.  |  | \`--' |  |) /_  ,--.--. \`--'\n|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.\n|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |\n\`--' \`--´  \`---´  \`--' \`--' \`------´  \`--'    \`--'\n🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | ${n.E.kolibriVersion}\n\t`,{forceLog:!0})},l=()=>{!0!==a().adviceShown&&(Object.defineProperty(a(),"adviceShown",{get:function(){return!0}}),s.L.debug("\nYou are using the KoliBri component library. If you have any suggestions for improvement or find a problem, please contact us:\n\nTicket: https://github.com/public-ui/kolibri/issues/new/choose (for privacy reasons, please use email)\nEmail: kolibri@itzbund.de\n"))};let c=()=>Math.floor(16777215*Math.random()).toString(16);"test"===i.p&&(c=()=>"nonce")},8445:(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)}function s(t){t.preventDefault(),n(t)}o.d(e,{p:()=>s,s:()=>n,t:()=>i})},8463:(t,e,o)=>{o.d(e,{v:()=>i});var n=o(1722);const i=(t,e,o={})=>{(0,n.b)(t,"_hideLabel",e,o)}},472:(t,e,o)=>{o.d(e,{a:()=>d,b:()=>r,c:()=>l,h:()=>i,v:()=>h});var n=o(1722);const i=[0,1,2,3,4,5,6],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,n.w)(t,"_label",(t=>"string"==typeof t),c,e,function(t){var e;return Object.assign(Object.assign({},t),{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},7177:(t,e,o)=>{o.d(e,{b:()=>a,h:()=>i,p:()=>n,s:()=>s});let n="development";try{n="production"}catch(t){n="production"}const i=(t,e,o)=>{if(t&&e&&"string"==typeof o){const n=t.querySelector(`[slot="${o}"]`);n&&e.appendChild(n)}},s=t=>""===t,a=(t,e)=>t||e||""},3589:(t,e,o)=>{o.d(e,{v:()=>i});var n=o(5683);const i=(t,e)=>{(0,n.v)(t,"_tooltipAlign",e)}}}]);