@public-ui/sample-react 2.1.1 → 2.1.2

package/dist/main.js.LICENSE.txt

@@ -33,7 +33,7 @@
  */
 
 /**
- * @remix-run/router v1.16.0
+ * @remix-run/router v1.16.1
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -44,7 +44,7 @@
  */
 
 /**
- * React Router v6.23.0
+ * React Router v6.23.1
  *
  * Copyright (c) Remix Software Inc.
  *

package/package.json

@@ -1,37 +1,37 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "This app contains samples for the KoliBri/Public UI",
   "license": "EUPL-1.2",
   "dependencies": {
-    "@leanup/stack": "1.3.50",
-    "@leanup/stack-react": "1.3.50",
-    "@leanup/stack-webpack": "1.3.50",
+    "@leanup/stack": "1.3.53",
+    "@leanup/stack-react": "1.3.53",
+    "@leanup/stack-webpack": "1.3.53",
     "@types/node": "ts5.4",
-    "@types/react": "18.3.1",
+    "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "@unocss/preset-uno": "0.58.9",
     "@unocss/webpack": "0.58.9",
-    "ajv": "8.12.0",
-    "chromedriver": "124.0.1",
+    "ajv": "8.16.0",
+    "chromedriver": "124.0.4",
     "cpy-cli": "5.0.0",
     "eslint-plugin-jsx-a11y": "6.8.0",
-    "eslint-plugin-react": "7.34.1",
+    "eslint-plugin-react": "7.34.2",
     "formik": "2.4.6",
-    "nightwatch-axe-verbose": "2.3.0",
+    "nightwatch-axe-verbose": "2.3.1",
     "npm-run-all": "4.1.5",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-router": "6.23.0",
-    "react-router-dom": "6.23.0",
-    "rimraf": "5.0.5",
+    "react-router": "6.23.1",
+    "react-router-dom": "6.23.1",
+    "rimraf": "5.0.7",
     "ts-prune": "0.10.3",
     "typescript": "5.4.5",
     "world_countries_lists": "2.9.0",
     "yup": "1.4.0",
-    "@public-ui/components": "2.1.1",
-    "@public-ui/themes": "2.1.1",
-    "@public-ui/react": "2.1.1"
+    "@public-ui/components": "2.1.2",
+    "@public-ui/themes": "2.1.2",
+    "@public-ui/react": "2.1.2"
   },
   "files": [
     ".eslintignore",

package/src/App.tsx

@@ -132,6 +132,8 @@ export const App: FC = () => {
 						sample={routerLocation.pathname}
 						routes={ROUTES}
 						routeList={ROUTE_LIST}
+						buildDate={process.env.BUILD_DATE}
+						commitHash={process.env.COMMIT_HASH}
 						onThemeChange={handleThemeChange}
 					/>
 				)}

package/src/components/Sidebar.tsx

@@ -1,5 +1,5 @@
 import type { FC, PropsWithChildren } from 'react';
-import React, { useState } from 'react';
+import React from 'react';
 
 import { KolAccordion, KolButton, KolHeading, KolLink, KolSelect, KolVersion } from '@public-ui/react';
 
@@ -13,6 +13,8 @@ type Props = {
 	routes: Routes;
 	routeList: string[];
 	sample: string;
+	buildDate?: string;
+	commitHash?: string;
 	onThemeChange: (theme: unknown) => void;
 };
 
@@ -24,20 +26,15 @@ const ComponentNavContainer = ({ children, isMobile }: PropsWithChildren<{ isMob
 	) : (
 		<div className="mt">{children}</div>
 	);
-export const Sidebar: FC<Props> = ({ version, theme, routes, routeList, sample, onThemeChange }) => {
+export const Sidebar: FC<Props> = ({ version, theme, routes, routeList, sample, buildDate, commitHash, onThemeChange }) => {
 	/* KolSelect calls onChange initially by design - work around this with a state variable  */
-	const [isFirstThemeSelectChange, setIsFirstThemeSelectChange] = useState(true);
 	const isMobile = useMobile();
 
 	const getIndexOfSample = () => routeList.indexOf(sample);
 	const formatSampleAsLabel = () => sample.replace(/\//g, ' ');
 
 	const handleThemeSelectChange = (_event: Event, value: unknown) => {
-		if (isFirstThemeSelectChange) {
-			setIsFirstThemeSelectChange(false);
-		} else {
-			onThemeChange((value as [string])[0]);
-		}
+		onThemeChange((value as [string])[0]);
 	};
 
 	const handleLinkClick = (event: Event) => {
@@ -63,6 +60,13 @@ export const Sidebar: FC<Props> = ({ version, theme, routes, routeList, sample,
 				<KolHeading _label="KoliBri React"></KolHeading>
 				<KolVersion _label={version}></KolVersion>
 			</div>
+			{(buildDate || commitHash) && (
+				<div className="text-sm font-mono color-gray-5 m-t-2">
+					{commitHash ? `Build: ${commitHash}` : ''}
+					<br />
+					{buildDate ? `at ${buildDate}` : ''}
+				</div>
+			)}
 
 			<KolSelect _label="Theme wählen" _options={THEME_OPTIONS} _on={{ onChange: handleThemeSelectChange }} _value={[theme]} class="mt"></KolSelect>
 

package/src/components/form/basic.tsx

@@ -0,0 +1,19 @@
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+import { KolForm, KolInputText } from '@public-ui/react';
+
+export const FormBasic: FC = () => (
+	<>
+		<SampleDescription>
+			<p>Dieses Beispiel zeigt ein Formular mit drei Eingabefeldern.</p>
+		</SampleDescription>
+		<KolForm>
+			<div className="grid gap-2">
+				<KolInputText id="input1" _label="Eingabe 1" />
+				<KolInputText id="input2" _label="Eingabe 2" />
+				<KolInputText id="input3" _label="Eingabe 3" />
+			</div>
+		</KolForm>
+	</>
+);

package/src/components/form/error-list.tsx

@@ -0,0 +1,26 @@
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+import { KolForm, KolInputText } from '@public-ui/react';
+
+export const FormErrorList: FC = () => (
+	<>
+		<SampleDescription>
+			<p>Dieses Beispiel zeigt ein Formular mit drei Eingabefeldern. Das zweite Eingabefeld enthält einen Fehler. </p>
+		</SampleDescription>
+		<KolForm
+			_errorList={[
+				{
+					message: 'Fehler in Eingabe 2',
+					selector: '#input2',
+				},
+			]}
+		>
+			<div className="grid gap-2">
+				<KolInputText id="input1" _label="Eingabe 1" />
+				<KolInputText id="input2" _label="Eingabe 2" _touched _msg={{ _description: 'Fehlerhafte Eingabe', _type: 'error' }} />
+				<KolInputText id="input3" _label="Eingabe 3" />
+			</div>
+		</KolForm>
+	</>
+);

package/src/components/form/routes.ts

@@ -1,5 +1,10 @@
 import { Routes } from '../../shares/types';
+import { FormBasic } from './basic';
+import { FormErrorList } from './error-list';
 
 export const FORM_ROUTES: Routes = {
-	form: {},
+	form: {
+		basic: FormBasic,
+		'error-list': FormErrorList,
+	},
 };

package/src/components/handout/basic.tsx

@@ -27,7 +27,6 @@ import {
 	KolKolibri,
 	KolLink,
 	KolLinkButton,
-	KolLogo,
 	KolNav,
 	KolProgress,
 	KolSelect,
@@ -883,9 +882,6 @@ export const HandoutBasic: FC = () => (
 							<p>
 								Ich bin ein <KolLink _href="#/back-page" _label="externer Link" _target="w3c"></KolLink> im Fließtext.
 							</p>
-							<KolLink _href="#/back-page" _label="">
-								<KolLogo slot="expert" class="inline-flex w-50" _org={Bundesanstalt['Informationstechnikzentrum Bund']} />
-							</KolLink>
 						</div>
 					</KolAccordion>
 					<KolAccordion _label="ButtonLinks" _level={3}>
@@ -896,9 +892,6 @@ export const HandoutBasic: FC = () => (
 							<p>
 								Ich bin ein <KolButtonLink _label="Link"></KolButtonLink> im Fließtext.
 							</p>
-							<KolButtonLink _label="">
-								<KolLogo slot="expert" class="inline-flex w-50" _org={Bundesanstalt['Informationstechnikzentrum Bund']} />
-							</KolButtonLink>
 							<KolButtonLink
 								_icons={{
 									left: 'codicon codicon-arrow-left',

package/src/components/pagination/basic.tsx

@@ -13,8 +13,8 @@ export const PaginationBasic: FC = () => (
 			</p>
 		</SampleDescription>
 		<div className="grid gap-4">
-			<KolPagination _max={10} _page={6} _siblingCount={0} _label="Test Paginierung 1" _on={{}} />
-			<KolPagination _max={6} _page={6} _siblingCount={0} _boundaryCount={2} _label="Test Paginierung 2" _on={{}} />
+			<KolPagination _max={316514} _page={15475} _siblingCount={3} _label="Test Paginierung 1" _on={{}} />
+			<KolPagination _max={14} _page={14} _siblingCount={1} _boundaryCount={2} _label="Test Paginierung 2" _on={{}} />
 			<KolPagination _max={4} _page={1} _siblingCount={0} _boundaryCount={2} _label="Test Paginierung 3" _on={{}} />
 			<KolPagination _max={4} _page={6} _siblingCount={0} _boundaryCount={2} _hasButtons={false} _label="Test Paginierung 4" _on={{}} />
 			<KolPagination

package/src/components/table/routes.ts

@@ -8,6 +8,7 @@ import { TableRenderCell } from './render-cell';
 import { TableSortData } from './sort-data';
 import { TableStateless } from './stateless';
 import { TableWithFooter } from './with-footer';
+import { TableStatefulWithSelection } from './stateful-with-selection';
 import { TableStatelessWithSelection } from './stateless-with-selection';
 import { TableWithPagination } from './with-pagination';
 
@@ -21,6 +22,7 @@ export const TABLE_ROUTES: Routes = {
 		'render-cell': TableRenderCell,
 		'sort-data': TableSortData,
 		'with-footer': TableWithFooter,
+		'stateful-with-selection': TableStatefulWithSelection,
 		'stateless-with-selection': TableStatelessWithSelection,
 		'with-pagination': TableWithPagination,
 		stateless: TableStateless,

package/src/components/table/stateful-with-selection.tsx

@@ -0,0 +1,78 @@
+import type { FC } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import { KolButton, KolTableStateful } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
+import type { KoliBriTableSelection } from '@public-ui/components';
+
+const DATA = [
+	{ id: '1001', name: 'Foo Bar' },
+	{ id: '1002', name: 'Foo Baz' },
+];
+type Data = (typeof DATA)[0];
+
+export const TableStatefulWithSelection: FC = () => {
+	const [selectedValue, setSelectedValue] = useState<Data[]>();
+
+	const selection: KoliBriTableSelection = {
+		label: (row: Data) => `Selection for ${row.name}`,
+		selectedKeys: selectedValue ? selectedValue.map((element) => element.id) : [],
+		keyPropertyName: 'id',
+	};
+
+	const kolTableStatefulRef = useRef<HTMLKolTableStatefulElement>();
+
+	const handleSelectionChangeEvent = ({ detail: selection }) => {
+		console.log('Selection change via event', selection);
+	};
+	const handleSelectionChangeCallback = (_event, selection) => {
+		console.log('Selection change via callback', selection);
+	};
+
+	const handleButtonClick = async () => {
+		const selection = await kolTableStatefulRef.current?.getSelection();
+		setSelectedValue(selection);
+	};
+
+	useEffect(() => {
+		kolTableStatefulRef.current?.addEventListener('kol-selection-change', handleSelectionChangeEvent);
+
+		return () => {
+			kolTableStatefulRef.current?.removeEventListener('kol-selection-change', handleSelectionChangeEvent);
+		};
+	}, [kolTableStatefulRef]);
+
+	return (
+		<>
+			<SampleDescription>KolTableStateful with selection</SampleDescription>
+
+			<KolTableStateful
+				_label="Table with selection checkboxes"
+				_headers={{
+					horizontal: [
+						[
+							{ key: 'id', label: '#ID', textAlign: 'left' },
+							{ key: 'name', label: 'Name', textAlign: 'left' },
+						],
+					],
+				}}
+				_data={DATA}
+				_selection={selection}
+				_on={{ onSelectionChange: handleSelectionChangeCallback }}
+				className="block"
+				style={{ maxWidth: '600px' }}
+				ref={kolTableStatefulRef}
+			/>
+			<div className="grid grid-cols-3 items-end gap-4 mt-4">
+				<KolButton
+					_label="getSelection()"
+					_on={{
+						onClick: () => {
+							void handleButtonClick();
+						},
+					}}
+				></KolButton>
+				<pre>{JSON.stringify(selectedValue, null, 2)}</pre>
+			</div>
+		</>
+	);
+};

package/src/components/tabs/basic.tsx

@@ -8,6 +8,11 @@ const tabs = [
 	{
 		_icons: 'codicon codicon-pie-chart',
 		_label: 'Erster Tab',
+		_on: {
+			onSelect: (event) => {
+				console.log('Erster Tab ausgewählt', event);
+			},
+		},
 	},
 	{
 		_icons: 'codicon codicon-calendar',

package/src/shares/routes.ts

@@ -29,7 +29,6 @@ import { KOLIBRI_ROUTES } from '../components/kolibri/routes';
 import { LINK_BUTTON_ROUTES } from '../components/link-button/routes';
 import { LINK_GROUP_ROUTES } from '../components/link-group/routes';
 import { LINK_ROUTES } from '../components/link/routes';
-import { LOGO_ROUTES } from '../components/logo/routes';
 import { MODAL_ROUTES } from '../components/modal/routes';
 import { NAV_ROUTES } from '../components/nav/routes';
 import { PAGINATION_ROUTES } from '../components/pagination/routes';
@@ -83,7 +82,6 @@ export const ROUTES: Routes = {
 	...LINK_BUTTON_ROUTES,
 	...LINK_GROUP_ROUTES,
 	...LINK_ROUTES,
-	...LOGO_ROUTES,
 	...MODAL_ROUTES,
 	...NAV_ROUTES,
 	...PAGINATION_ROUTES,

package/webpack.config.js

@@ -3,12 +3,15 @@ const webpack = require('webpack');
 module.exports = (...args) => {
 	const config = require('@leanup/stack-react/webpack.config')(...args);
 	const UnoCSS = require('@unocss/webpack').default;
+	const commitHash = require('child_process').execSync('git rev-parse --short HEAD').toString().trim();
 	config.plugins.push(UnoCSS());
 	config.plugins.push(
 		new webpack.EnvironmentPlugin({
 			THEME_MODULE: '',
 			THEME_EXPORT: '',
 			ENABLE_TAG_NAME_TRANSFORMER: '',
+			BUILD_DATE: new Date().toISOString(),
+			COMMIT_HASH: commitHash,
 		}),
 	);
 	return config;

package/dist/1011.js

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

package/dist/1174.js

@@ -1,2 +0,0 @@
-/*! For license information please see 1174.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[1174],{3310:(e,t,n)=>{n.d(t,{I:()=>s,a:()=>r});var i=n(9743),a=n(5445),o=n(4347);const l=["text","search","url","tel"];class s extends i.I{constructor(e,t,n){super(e,t,n),this.component=e}validateSuggestions(e){(0,o.v)(this.component,e)}componentWillLoad(){super.componentWillLoad(),this.validateSuggestions(this.component._suggestions)}}class r extends s{constructor(e,t,n){super(e,t,n),this.hasError=!1,this.component=e}validateType(e){(0,a.w)(this.component,"_type",(e=>"string"==typeof e&&l.includes(e)),new Set([`String {${l.join(", ")}`]),e)}validateHasCounter(e){(0,i.v)(this.component,e)}componentWillLoad(){super.componentWillLoad(),this.validateType(this.component._type),this.validateHasCounter(this.component._hasCounter)}}},6321:(e,t,n)=>{n.d(t,{a:()=>l,p:()=>s});var i=n(5445),a=n(1973);const o=e=>{for((0,a.a)()&&((0,i.j)("↓ Search form element start."),console.log(e));e instanceof HTMLElement&&"FORM"!==e.tagName&&"KOL-FORM"!==e.tagName;){try{e=e.parentElement instanceof HTMLElement?e.parentElement:e.parentNode instanceof ShadowRoot?e.parentNode.host:null}catch(e){}(0,a.a)()&&(console.log(e),(0,i.j)("↑ Search form element finished."))}return e},l=(e={})=>{var t,n;const a=o(e.form);if(a instanceof HTMLElement){const e=new Event("reset",{bubbles:!0,cancelable:!0});if("FORM"===a.tagName)(0,i.q)(e,a),a.dispatchEvent(e);else if("KOL-FORM"===a.tagName){(0,i.q)(e,i.K.querySelector("form",a));const o=a;"function"==typeof(null===(t=o._on)||void 0===t?void 0:t.onReset)&&(null===(n=o._on)||void 0===n||n.onReset(e))}}},s=(e={})=>{const t=o(e.form);if(t instanceof HTMLElement){const e=new SubmitEvent("submit",{bubbles:!0,cancelable:!0,submitter:t});if("FORM"===t.tagName)(0,a.a)()&&!1===t.noValidate&&(0,i.j)("If you have not focusable or hidden form fields in your form, you should enable noValidate for your form.",{force:!0}),setTimeout((()=>{"function"==typeof t.requestSubmit?t.requestSubmit():((0,i.q)(e,t),t.dispatchEvent(e))}));else if("KOL-FORM"===t.tagName){(0,i.q)(e,i.K.querySelector("form",t));const n=t;setTimeout((()=>{var t,i;"function"==typeof(null===(t=n._on)||void 0===t?void 0:t.onSubmit)&&(null===(i=n._on)||void 0===i||i.onSubmit(e))}))}}}},9743:(e,t,n)=>{n.d(t,{I:()=>l,v:()=>o});var i=n(5980),a=n(5445);const o=(e,t)=>{(0,a.b)(e,"_hasCounter",t)};class l extends i.I{constructor(e,t,n){super(e,t,n),this.component=e}validateAutoComplete(e){(0,a.w)(this.component,"_autoComplete",(e=>"string"==typeof e&&("on"===e||"off"===e)),new Set(["on | off"]),e)}validateHasCounter(e){o(this.component,e)}validateMaxLength(e){(0,a.k)(this.component,"_maxLength",e,{min:0})}validatePattern(e){(0,a.i)(this.component,"_pattern",e)}validatePlaceholder(e){(0,a.i)(this.component,"_placeholder",e)}validateReadOnly(e){(0,a.b)(this.component,"_readOnly",e)}validateRequired(e){(0,a.b)(this.component,"_required",e)}validateValue(e){(0,a.i)(this.component,"_value",e),this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateHasCounter(this.component._hasCounter),this.validateMaxLength(this.component._maxLength),this.validatePattern(this.component._pattern),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateRequired(this.component._required),this.validateValue(this.component._value)}}},5980:(e,t,n)=>{n.d(t,{I:()=>r});var i=n(9371),a=n(5241),o=n(5445),l=n(5614);const s=(e,t)=>{const n=e;"object"==typeof n&&null!==n&&((0,l.i)(n.right,1)&&(n.right={icon:n.right}),(0,l.i)(n.left,1)&&(n.left={icon:n.left}),t.set("_icons",n))};class r extends i.I{constructor(e,t,n){super(e,t,n),this.component=e}validateIcon(e){this.validateIcons(e)}validateIcons(e){(0,o.o)(e,(()=>{try{e=(0,o.p)(e)}catch(e){}(0,o.w)(this.component,"_icons",(e=>"object"==typeof e&&null!==e&&((0,l.i)(e.left,1)||(0,a.i)(e.left)||(0,l.i)(e.right,1)||(0,a.i)(e.right))),new Set(["KoliBriHorizontalIcon"]),e,{hooks:{beforePatch:s},required:!0})}))}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons||this.component._icon)}}},5241:(e,t,n)=>{n.d(t,{i:()=>l,v:()=>s});var i=n(5445),a=n(5614);const o=(e,t,n)=>{(0,a.c)(n)?e[t]=n:(0,a.i)(n,1)&&(e[t]={icon:n})},l=e=>"object"==typeof e&&null!==e&&(void 0===e.style||(0,a.b)(e.style))&&(void 0===e.label||(0,a.i)(e.label))&&(0,a.i)(e.icon,1),s=(e,t,n={})=>{(0,i.o)(t,(()=>{var s;try{t=(0,i.p)(t)}catch(e){}(0,i.w)(e,"_icons",(e=>{const t="object"==typeof e&&null!==e&&0===Object.keys(e).length;return null===e||t||(0,a.i)(e,1)||"object"==typeof e&&null!==e&&((0,a.i)(e.left,1)||l(e.left)||(0,a.i)(e.right,1)||l(e.right)||(0,a.i)(e.top,1)||l(e.top)||(0,a.i)(e.bottom,1)||l(e.bottom))}),new Set(["KoliBriIcon"]),t,Object.assign(Object.assign({},n),{defaultValue:{},hooks:{afterPatch:null===(s=n.hooks)||void 0===s?void 0:s.afterPatch,beforePatch:(e,t,i,l)=>{var s,r;"function"==typeof(null===(s=n.hooks)||void 0===s?void 0:s.beforePatch)&&(null===(r=n.hooks)||void 0===r||r.beforePatch(e,t,i,l)),(e=>{var t,n,i;if(null===(t=e.nextState)||void 0===t?void 0:t.has("_icons")){const t=null===(n=e.nextState)||void 0===n?void 0:n.get("_icons");null===(i=e.nextState)||void 0===i||i.set("_icons",(e=>{let t={};return(0,a.i)(e,1)?t={left:{icon:e}}:"object"==typeof e&&null!==e&&(o(t,"top",e.top),o(t,"right",e.right),o(t,"bottom",e.bottom),o(t,"left",e.left)),t})(t))}})(i)}}}))}))}},1174:(e,t,n)=>{n.r(t),n.d(t,{kol_input_text:()=>u});var i=n(3185),a=n(5605),o=n(6321),l=n(9371),s=n(5328),r=n(3310),d=n(5501),h=n(5445),c=n(5614);const u=class{getValue(){return e=this,null,t=function*(){var e;return null===(e=this.ref)||void 0===e?void 0:e.value},new Promise(((n,i)=>{var a=e=>{try{l(t.next(e))}catch(e){i(e)}},o=e=>{try{l(t.throw(e))}catch(e){i(e)}},l=e=>e.done?n(e.value):Promise.resolve(e.value).then(a,o);l((t=t.apply(e,null)).next())}));var e,t}render(){const{ariaDescribedBy:e}=(0,l.g)(this.state),t=Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0,n=(0,c.s)(this.state._label);return(0,i.h)(i.H,{key:"d5d16bb0adf2be9984ae68798d4514189a68eda0",class:{"has-value":this.state._hasValue,"kol-input-text":!0}},(0,i.h)(d.l,{key:"f1c247e405bb06c6d3f71229fa36eafc20c8f90d",class:{[this.state._type]:!0,"hide-label":!!this.state._hideLabel},_accessKey:this.state._accessKey,_currentLength:this.state._currentLength,_disabled:this.state._disabled,_hasCounter:this.state._hasCounter,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_maxLength:this.state._maxLength,_msg:this.state._msg,_readOnly:this.state._readOnly,_required:this.state._required,_smartButton:this.state._smartButton,_suggestions:this.state._suggestions,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var e;return null===(e=this.ref)||void 0===e?void 0:e.focus()},role:"presentation"},(0,i.h)("span",{key:"a2409bd3131e5d94144df961c817b233ddf095a7",slot:"label"},n?(0,i.h)("slot",{name:"expert"}):"string"==typeof this.state._accessKey?(0,i.h)(i.F,null,(0,i.h)(s.I,{accessKey:this.state._accessKey,label:this.state._label})," ",(0,i.h)("span",{class:"access-key-hint","aria-hidden":"true"},this.state._accessKey)):(0,i.h)("span",null,this.state._label)),(0,i.h)("div",{key:"433b6fc79d40f2587b58308bb3afb6680f742e8c",slot:"input"},(0,i.h)("input",Object.assign({key:"d88d6840550e2647e9d25d43db8c423019d0653a",ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":e.length>0?e.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,list:t?`${this.state._id}-list`:void 0,maxlength:this.state._maxLength,name:this.state._name,pattern:this.state._pattern,placeholder:this.state._placeholder,readOnly:this.state._readOnly,required:this.state._required,spellcheck:"false",type:this.state._type,value:this.state._value},this.controller.onFacade,{onChange:this.onChange,onInput:this.onInput,onKeyDown:this.onKeyDown})))))}constructor(e){(0,i.r)(this,e),this.catchRef=e=>{this.ref=e,(0,c.a)(this.host,this.ref)},this.onChange=e=>{var t,n;this.oldValue!==(null===(t=this.ref)||void 0===t?void 0:t.value)&&(this.oldValue=null===(n=this.ref)||void 0===n?void 0:n.value,this.controller.onFacade.onChange(e))},this.onInput=e=>{(0,h.s)(this,"_currentLength",e.target.value.length),this.controller.onFacade.onInput(e)},this.onKeyDown=e=>{"Enter"!==e.code&&"NumpadEnter"!==e.code||(0,o.p)({form:this.host,ref:this.ref})},this._accessKey=void 0,this._alert=!0,this._autoComplete=void 0,this._disabled=!1,this._error=void 0,this._hasCounter=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._maxLength=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._pattern=void 0,this._placeholder=void 0,this._readOnly=!1,this._required=!1,this._suggestions=void 0,this._smartButton=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._type="text",this._value=void 0,this.state={_autoComplete:"off",_currentLength:0,_hasValue:!1,_hideError:!1,_id:`id-${(0,a.n)()}`,_label:"",_suggestions:[],_type:"text"},this.controller=new r.a(this,"text",this.host)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAlert(e){((e,t)=>{(0,h.b)(e,"_alert",t)})(this,e)}validateAutoComplete(e){this.controller.validateAutoComplete(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateError(e){this.controller.validateError(e)}validateHasCounter(e){this.controller.validateHasCounter(e)}validateHideError(e){this.controller.validateHideError(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMaxLength(e){this.controller.validateMaxLength(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validatePattern(e){this.controller.validatePattern(e)}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateReadOnly(e){this.controller.validateReadOnly(e)}validateRequired(e){this.controller.validateRequired(e)}validateSuggestions(e){this.controller.validateSuggestions(e)}validateSmartButton(e){this.controller.validateSmartButton(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateType(e){this.controller.validateType(e)}validateValue(e){this.controller.validateValue(e)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.oldValue=this._value,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((e=>this.state._hasValue=!!e))}get host(){return(0,i.g)(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_pattern:["validatePattern"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_suggestions:["validateSuggestions"],_smartButton:["validateSmartButton"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"]}}};u.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    /* Visible with forced colors */\n    outline: transparent solid 1px;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}"}},4347:(e,t,n)=>{n.d(t,{v:()=>a});var i=n(5445);const a=(e,t)=>{(0,i.g)(e,"_suggestions",(e=>"string"==typeof e||"number"==typeof e),t,void 0,{hooks:{afterPatch:e=>{Array.isArray(e)&&e.length&&(0,i.a)("Property suggestions: Options have accessibility issues in how browsers implemented them and should not be used for now.")}}})}}}]);