@public-ui/sample-react 2.0.6 → 2.0.8

package/dist/main.js.LICENSE.txt

@@ -33,7 +33,7 @@
  */
 
 /**
- * @remix-run/router v1.15.0
+ * @remix-run/router v1.15.1
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -44,7 +44,7 @@
  */
 
 /**
- * React Router v6.22.0
+ * React Router v6.22.1
  *
  * Copyright (c) Remix Software Inc.
  *

package/package.json

@@ -1,22 +1,22 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "2.0.6",
+  "version": "2.0.8",
   "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": "2.0.6",
-    "@public-ui/react": "2.0.6",
-    "@public-ui/themes": "2.0.6",
-    "@types/node": "20.11.17",
-    "@types/react": "18.2.55",
+    "@public-ui/components": "2.0.8",
+    "@public-ui/react": "2.0.8",
+    "@public-ui/themes": "2.0.8",
+    "@types/node": "20.11.19",
+    "@types/react": "18.2.57",
     "@types/react-dom": "18.2.19",
     "@unocss/preset-uno": "0.58.5",
     "@unocss/webpack": "0.58.5",
     "ajv": "8.12.0",
-    "chromedriver": "121.0.0",
+    "chromedriver": "121.0.2",
     "cpy-cli": "5.0.0",
     "eslint-plugin-jsx-a11y": "6.8.0",
     "eslint-plugin-react": "7.33.2",
@@ -25,8 +25,8 @@
     "npm-run-all": "4.1.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-router": "6.22.0",
-    "react-router-dom": "6.22.0",
+    "react-router": "6.22.1",
+    "react-router-dom": "6.22.1",
     "rimraf": "3.0.2",
     "ts-prune": "0.10.3",
     "typescript": "5.3.3",
@@ -52,11 +52,10 @@
     "build:deps": "pnpm --filter @public-ui/sample-react^... build",
     "format": "prettier --check src",
     "lint": "eslint \"{src,tests}/**/*.{html,js,json,jsx,ts,tsx,gql,graphql}\"",
+    "prepare:components-assets": "cpy \"node_modules/@public-ui/components/assets/**/*\" public/assets --dot",
+    "prepare:themes-assets": "cpy \"node_modules/@public-ui/themes/assets/**/*\" public/assets --dot",
     "serve": "cross-env NODE_ENV=development webpack serve --devtool=source-map",
     "start": "npm run serve -- --open",
-    "unused": "ts-prune -e src",
-    "postinstall": "npm-run-all postinstall:*",
-    "postinstall:components-assets": "cpy \"node_modules/@public-ui/components/assets/**/*\" public/assets --dot",
-    "postinstall:themes-assets": "cpy \"node_modules/@public-ui/themes/assets/**/*\" public/assets --dot"
+    "unused": "ts-prune -e src"
   }
 }

package/src/App.tsx

@@ -6,13 +6,13 @@ import { Navigate, Route, Routes, useSearchParams } from 'react-router-dom';
 import PackageJson from '@public-ui/components/package.json';
 import { KolAlert, KolBadge } from '@public-ui/react';
 
+import { BackPage } from './components/BackPage';
 import { Sidebar } from './components/Sidebar';
 import { useSetCurrentLocation } from './hooks/useSetCurrentLocation';
 import { HideMenusContext } from './shares/HideMenusContext';
 import { ROUTES } from './shares/routes';
 import { getTheme, getThemeName, setStorage, setTheme } from './shares/store';
-import { isDraftTheme, THEME_OPTIONS } from './shares/theme';
-import { BackPage } from './components/BackPage';
+import { THEMES, THEME_OPTIONS, isDraftTheme } from './shares/theme';
 
 import type { Route as MyRoute, Routes as MyRoutes } from './shares/types';
 
@@ -50,19 +50,17 @@ const getRouteTree = (routes: MyRoutes): ReturnType<typeof Route>[] => {
 						path={`${path}/all`}
 						element={
 							<div className="d-grid gap-4">
-								{THEME_OPTIONS.filter((theme) => ['bmf', 'default', 'ecl-ec', 'ecl-eu', 'itzbund'].indexOf((theme as Option<Theme>).value) >= 0).map(
-									(theme) => (
-										<div className="d-grid gap-2" key={(theme as Option<Theme>).value} data-theme={(theme as Option<Theme>).value}>
-											<div className="mt-4">
-												<strong>{theme.label}</strong>
-											</div>
-											<div className="my-2">
-												<ThisRoute />
-											</div>
-											<hr aria-hidden="true" />
+								{THEME_OPTIONS.filter((theme) => THEMES.indexOf((theme as Option<Theme>).value) >= 0).map((theme) => (
+									<div className="d-grid gap-2" key={(theme as Option<Theme>).value} data-theme={(theme as Option<Theme>).value}>
+										<div className="mt-4">
+											<strong>{theme.label}</strong>
+										</div>
+										<div className="my-2">
+											<ThisRoute />
 										</div>
-									),
-								)}
+										<hr aria-hidden="true" />
+									</div>
+								))}
 							</div>
 						}
 					/>,
@@ -137,14 +135,14 @@ export const App: FC = () => {
 					/>
 				)}
 
-				<div className="p-4" id="route-container">
+				<main className="p-4" id="route-container">
 					{!hideMenus && isDraftTheme(theme) && <KolBadge className="block mb-3" _label="DRAFT" _color="#db5461" />}
 					<Routes>
 						{ROUTE_TREE}
 						<Route path="*" element={<KolAlert _type="info">This code example has not been migrated yet - it&#39;s coming soon!</KolAlert>} />
 						<Route path="back-page" element={<BackPage />} />
 					</Routes>
-				</div>
+				</main>
 			</div>
 		</HideMenusContext.Provider>
 	);

package/src/components/input-text/partials/cases.tsx

@@ -14,7 +14,6 @@ export const InputTextCases = forwardRef<HTMLKolInputTextElement, Components.Kol
 				_error={ERROR_MSG}
 				_placeholder="Mit Icons"
 				_icons={{
-					left: 'codicon codicon-arrow-left',
 					right: {
 						icon: 'codicon codicon-arrow-right',
 						style: {
@@ -28,13 +27,13 @@ export const InputTextCases = forwardRef<HTMLKolInputTextElement, Components.Kol
 					onClick: console.log,
 					onFocus: console.log,
 				}}
-				_hideLabel
 				_required
 				_type="search"
 				_touched
-				_label="Suche"
+				_label="Vorname (text)"
+				_accessKey="V"
+				ref={ref}
 			/>
-			<KolInputText {...props} ref={ref} _accessKey="V" _placeholder="Placeholder" _label="Vorname (text)" _required />
 			<KolInputText {...props} _placeholder="Placeholder" _label="Suche (search)" _type="search" />
 			<KolInputText {...props} _placeholder="Placeholder" _error={ERROR_MSG} _touched _type="url" _label="URL (url)" />
 			<KolInputText {...props} _placeholder="Placeholder" _type="tel" _label="Telefon (tel)" />

package/src/scenarios/disabled-interactive-elements.tsx

@@ -0,0 +1,161 @@
+import {
+	KolAccordion,
+	KolButton,
+	KolButtonLink,
+	KolCard,
+	KolDetails,
+	KolInputCheckbox,
+	KolInputColor,
+	KolInputDate,
+	KolInputEmail,
+	KolInputFile,
+	KolInputNumber,
+	KolInputPassword,
+	KolInputRadio,
+	KolInputRange,
+	KolInputText,
+	KolLink,
+	KolLinkButton,
+	KolSelect,
+	KolTextarea,
+} from '@public-ui/react';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../components/SampleDescription';
+
+const OPTIONS = [
+	{
+		label: 'Option A',
+		value: 'A',
+	},
+	{
+		label: 'Option B',
+		value: 'B',
+	},
+];
+
+export const DisabledInteractiveElements: FC = () => (
+	<>
+		<SampleDescription>
+			<p>This example shows how deactivated interactive elements are displayed.</p>
+			<ul>
+				<li>Deactivated interactive elements pose a particular challenge for accessibility.</li>
+				<li>It must not be possible to focus on deactivated interactive elements, otherwise the tab paths will be unnecessarily extended.</li>
+				<li>Deactivated interactive elements should be labelled clearly and legibly.</li>
+				<li>
+					Deactivated interactive elements have a tooltip for sighted people and aria labelling for the screen readers reading mode if they are represented by
+					an interpretable graphic.
+				</li>
+			</ul>
+			<p>This implementation ensures standardized use for all users.</p>
+		</SampleDescription>
+		<div className="grid gap-4">
+			<KolCard _label="Button" _level={0}>
+				<div className="flex flex-wrap gap-4">
+					<KolButton _label="Label" />
+					<KolButton _disabled _label="Label" />
+					<KolButton _hideLabel _icons="codicon codicon-home" _label="Label" />
+					<KolButton _disabled _hideLabel _icons="codicon codicon-home" _label="Label" />
+				</div>
+			</KolCard>
+			<KolCard _label="ButtonLink" _level={0}>
+				<div className="flex flex-wrap gap-4">
+					<KolButtonLink _label="Label" />
+					<KolButtonLink _disabled _label="Label" />
+					<KolButtonLink _hideLabel _icons="codicon codicon-home" _label="Label" />
+					<KolButtonLink _hideLabel _icons="codicon codicon-home" _disabled _label="Label" />
+				</div>
+			</KolCard>
+			<KolCard _label="Link" _level={0}>
+				<div className="flex flex-wrap gap-4">
+					<KolLink _href="#" _label="Label" />
+					<KolLink _disabled _href="#" _label="Label" />
+					<KolLink _hideLabel _href="#" _icons="codicon codicon-home" _label="Label" />
+					<KolLink _disabled _hideLabel _href="#" _icons="codicon codicon-home" _label="Label" />
+				</div>
+			</KolCard>
+			<KolCard _label="LinkButton" _level={0}>
+				<div className="flex flex-wrap gap-4">
+					<KolLinkButton _href="#" _label="Label" />
+					<KolLinkButton _disabled _href="#" _label="Label" />
+					<KolLinkButton _hideLabel _href="#" _icons="codicon codicon-home" _label="Label" />
+					<KolLinkButton _disabled _hideLabel _href="#" _icons="codicon codicon-home" _label="Label" />
+				</div>
+			</KolCard>
+			<KolCard _label="Accordion" _level={0}>
+				<div className="grid gap-4">
+					<KolAccordion _label="Label">Content</KolAccordion>
+					<KolAccordion _disabled _label="Label">
+						Content
+					</KolAccordion>
+					<KolAccordion _label="Label (open)" _open>
+						Content
+					</KolAccordion>
+					<KolAccordion _disabled _label="Label (open)" _open>
+						Content
+					</KolAccordion>
+				</div>
+			</KolCard>
+			<KolCard _label="Details" _level={0}>
+				<div className="grid gap-4">
+					<KolDetails _label="Label">Content</KolDetails>
+					<KolDetails _disabled _label="Label">
+						Content
+					</KolDetails>
+					<KolDetails _label="Label (open)" _open>
+						Content
+					</KolDetails>
+					<KolDetails _disabled _label="Label (open)" _open>
+						Content
+					</KolDetails>
+				</div>
+			</KolCard>
+			{[KolInputCheckbox, KolInputColor, KolInputDate, KolInputEmail, KolInputFile, KolInputNumber, KolInputPassword, KolInputRange, KolInputText].map(
+				(Input) => {
+					const render = (
+						Input as typeof KolInputCheckbox & {
+							render: { displayName: string };
+						}
+					).render;
+					const name = render.displayName;
+					return (
+						<KolCard key={name} _label={name} _level={0}>
+							<div className="grid gap-4">
+								<Input _label="Label" />
+								<Input _disabled _label="Label" />
+								<Input _hideLabel _label="Label" />
+								<Input _disabled _hideLabel _label="Label" />
+							</div>
+						</KolCard>
+					);
+				},
+			)}
+			{[KolInputRadio, KolSelect].map((Input) => {
+				const render = (
+					Input as typeof KolInputRadio & {
+						render: { displayName: string };
+					}
+				).render;
+				const name = render.displayName;
+				return (
+					<KolCard key={name} _label={name} _level={0}>
+						<div className="grid gap-4">
+							<Input _label="Label" _options={OPTIONS} />
+							<Input _disabled _label="Label" _options={OPTIONS} />
+							<Input _hideLabel _label="Label" _options={OPTIONS} />
+							<Input _disabled _hideLabel _label="Label" _options={OPTIONS} />
+						</div>
+					</KolCard>
+				);
+			})}
+			<KolCard _label="KolTextarea" _level={0}>
+				<div className="grid gap-4">
+					<KolTextarea _label="Label" _rows={3} />
+					<KolTextarea _disabled _label="Label" _rows={3} />
+					<KolTextarea _hideLabel _label="Label" _rows={3} />
+					<KolTextarea _disabled _hideLabel _label="Label" _rows={3} />
+				</div>
+			</KolCard>
+		</div>
+	</>
+);

package/src/scenarios/routes.ts

@@ -2,6 +2,7 @@ import { Routes } from '../shares/types';
 import { AppointmentForm } from './appointment-form/AppointmentForm';
 import { TerminComponent } from './complex-form/component';
 import { CustomTooltipWidth } from './custom-tooltip-width';
+import { DisabledInteractiveElements } from './disabled-interactive-elements';
 import { InputsGetValue } from './inputs-get-value';
 import { StaticForm } from './static-form';
 
@@ -12,5 +13,6 @@ export const SCENARIO_ROUTES: Routes = {
 		'inputs-get-value': InputsGetValue,
 		'custom-tooltip-width': CustomTooltipWidth,
 		'static-form': StaticForm,
+		'disabled-interactive-scenario': DisabledInteractiveElements,
 	},
 };

package/src/scenarios/static-form.tsx

@@ -41,12 +41,13 @@ export const StaticForm: FC = () => {
 					</li>
 				</ol>
 			</SampleDescription>
-			<form className="grid gap-4" method="get">
+			<form className="grid gap-4" method="get" noValidate>
 				<KolInputCheckbox _name="checkbox" _label="Checkbox" />
 				<KolInputColor _name="color" _label="Color" />
 				<KolInputDate _name="date" _label="Date" />
 				<KolInputEmail _name="email" _label="Email" />
 				<KolInputFile _name="file" _label="File" />
+				<KolInputFile _name="file" _label="Files (multiple)" _multiple />
 				<KolInputNumber _name="number" _label="Number" />
 				<KolInputPassword _name="password" _label="Password" />
 				<KolInputRadio
@@ -67,7 +68,17 @@ export const StaticForm: FC = () => {
 						{ label: 'Option B', value: 'B' },
 					]}
 				/>
-				<KolTextarea _name="textarea" _label="Textarea" />
+				<KolSelect
+					_name="select"
+					_label="Select (multiple)"
+					_multiple
+					_options={[
+						{ label: 'Option A', value: 'A' },
+						{ label: 'Option B', value: 'B' },
+					]}
+					_rows={2}
+				/>
+				<KolTextarea _name="textarea" _label="Textarea" _rows={5} />
 				<div className="flex flex-wrap gap-4">
 					<KolButton _label="Submit" _type="submit" _variant="primary" />
 					<KolButton _label="Reset" _type="reset" />

package/src/shares/theme.ts

@@ -1,16 +1,14 @@
 import { SelectOption } from '@public-ui/components';
 
-export type Theme = 'bmf' | 'default' | 'ecl-ec' | 'ecl-eu' | 'itzbund' | 'unstyled';
+export const THEMES = ['bmf', 'default', 'ecl-ec', 'ecl-eu', 'itzbund'] as const;
+export type Theme = (typeof THEMES)[number] | 'unstyled';
 
 const drafts: Theme[] = ['ecl-ec', 'ecl-eu', 'itzbund'];
 
 export const isDraftTheme = (theme: Theme) => drafts.includes(theme);
 
 export const isTheme = (value: unknown) => {
-	return (
-		typeof value === 'string' &&
-		(value === 'bmf' || value === 'default' || value === 'ecl-ec' || value === 'ecl-eu' || value === 'itzbund' || value === 'unstyled')
-	);
+	return THEMES.find((theme) => theme === value) !== undefined;
 };
 
 export type Store = {

package/dist/80.js

@@ -1,2 +0,0 @@
-/*! For license information please see 80.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[80],{7620:(t,e,o)=>{o.d(e,{I:()=>i});var n=o(3520);const i=({accessKey:t,label:e})=>{let[o,...i]=e.split(t);return 0===i.length&&(t=t.toUpperCase(),[o,...i]=e.split(t)),0===i.length&&(t=t.toLowerCase(),[o,...i]=e.split(t)),(0,n.h)(n.F,null,o,i.length?(0,n.h)(n.F,null,(0,n.h)("u",null,t),i.join(t)):null)}},7184:(t,e,o)=>{o.d(e,{A:()=>i});var n=o(5244);class i{constructor(t,e,o){var i,s;if(this.experimentalMode=(0,n.a0)(),this.setFormAssociatedValue=t=>{var e;const o=null===(e=this.formAssociated)||void 0===e?void 0:e.getAttribute("name");null!==o&&""!==o||(0,n.h)(` The form field (${this.name}) must have a name attribute to be form-associated. Please define the _name attribute.`);const i=this.tryToStringifyValue(t);this.syncValue(t,i,this.formAssociated),this.syncValue(t,i,this.syncToOwnInput)},this.component=t,this.host=this.findHostWithShadowRoot(o),this.name=e,this.experimentalMode){switch(null===(i=this.host)||void 0===i||i.querySelectorAll("input,select,textarea").forEach((t=>{var e;null===(e=this.host)||void 0===e||e.removeChild(t)})),this.name){case"button":this.formAssociated=document.createElement("button");break;case"select":this.formAssociated=document.createElement("select"),this.formAssociated.setAttribute("multiple","");break;case"textarea":this.formAssociated=document.createElement("textarea");break;default:this.formAssociated=document.createElement("input"),this.formAssociated.setAttribute("type","hidden")}this.formAssociated.setAttribute("aria-hidden","true"),this.formAssociated.setAttribute("data-form-associated",""),this.formAssociated.setAttribute("hidden",""),null===(s=this.host)||void 0===s||s.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,n.a1)(`The form field raw value is not able to stringify! ${t}`),""}}syncValue(t,e,o){o&&("select"===this.name?(o.querySelectorAll("option").forEach((t=>{o.removeChild(t)})),Array.isArray(t)&&t.forEach((t=>{const e=this.tryToStringifyValue(t);if("string"==typeof e){const t=document.createElement("option");t.setAttribute("value",e),t.setAttribute("selected",""),o.appendChild(t)}}))):"string"==typeof e?(o.setAttribute("value",e),o.value=e):(o.removeAttribute("value"),o.value=""))}validateName(t){(0,n.a2)(this.component,t,{hooks:{afterPatch:()=>{this.setAttribute("name",this.formAssociated,this.component.state._name)}}}),void 0===t&&(0,n.h)("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)}}},9972:(t,e,o)=>{o.d(e,{I:()=>s});var n=o(5244),i=o(4572);class s extends i.I{constructor(t,e,o){super(t,e,o),this.component=t}validateAutoComplete(t){(0,n.w)(this.component,"_autoComplete",(t=>"string"==typeof t&&("on"===t||"off"===t)),new Set(["on | off"]),t)}validateHasCounter(t){(0,n.ac)(this.component,t)}validateMaxLength(t){(0,n.a7)(this.component,"_maxLength",t,{min:0})}validatePattern(t){(0,n.C)(this.component,"_pattern",t)}validatePlaceholder(t){(0,n.C)(this.component,"_placeholder",t)}validateReadOnly(t){(0,n.B)(this.component,"_readOnly",t)}validateRequired(t){(0,n.B)(this.component,"_required",t)}validateValue(t){(0,n.C)(this.component,"_value",t),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)}onBlur(t){this.component.state=Object.assign(Object.assign({},this.component.state),{_placeholder:this.placeholderCache}),this.placeholderCache=void 0,super.onBlur(t)}onFocus(t){this.placeholderCache=this.component.state._placeholder,this.component.state=Object.assign(Object.assign({},this.component.state),{_placeholder:void 0}),super.onFocus(t)}}},9728:(t,e,o)=>{o.d(e,{I:()=>r,g:()=>a});var n=o(5244),i=o(3344),s=o(7184);const a=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 l extends s.A{constructor(t,e,o){super(t,e,o),this.component=t}validateAlert(t){(0,n.B)(this.component,"_alert",t)}validateTouched(t){(0,n.N)(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateAlert(this.component._alert),this.validateTouched(this.component._touched)}}class r extends l{constructor(t,e,o){super(t,e,o),this.valueChangeListeners=[],this.onFacade={onBlur:this.onBlur.bind(this),onChange:this.onChange.bind(this),onClick:this.onClick.bind(this),onFocus:this.onFocus.bind(this)},this.component=t}validateAccessKey(t){(0,n.C)(this.component,"_accessKey",t)}validateAdjustHeight(t){(0,n.O)(this.component,t)}validateDisabled(t){(0,n.B)(this.component,"_disabled",t),!0===t&&(0,n.P)()}validateError(t){(0,n.C)(this.component,"_error",t)}validateHideError(t){(0,n.Q)(this.component,t,{hooks:{afterPatch:()=>{this.component.state._hideError&&(0,n.T)("Property hide-error for inputs: Only use when the error message is shown outside of the input component.")}}})}validateHideLabel(t){(0,n.R)(this.component,t,{hooks:{afterPatch:()=>{this.component.state._hideLabel&&(0,n.T)("Property hide-label for inputs: Only use for exceptions like search inputs that are clearly identifiable by their context.")}}})}validateHint(t){(0,n.C)(this.component,"_hint",t)}validateId(t){(0,n.C)(this.component,"_id",t,{hooks:{afterPatch:()=>{this.setAttribute("id",this.formAssociated,this.component.state._id)}},minLength:1}),""!==t&&void 0!==t||(0,n.h)("Eine eindeutige ID an den Eingabefeldern ist nicht zwingend erforderlich, könnte aber für die E2E-Tests relevant sein.")}validateLabel(t){(0,n.U)(this.component,t,{required:!0})}validateOn(t){"object"==typeof t&&(0,n.m)(this.component,"_on",t)}validateSmartButton(t){(0,n.t)(t,(()=>{try{t=(0,n.u)(t)}catch(t){}(0,n.m)(this.component,"_smartButton",t)}))}validateTabIndex(t){(0,n.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,i.s)(t),(0,i.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,i.t)("change",this.host,o),this.setFormAssociatedValue(o),"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onChange)&&this.component._on.onChange(t,o),this.valueChangeListeners.forEach((t=>t(o)))}onClick(t){var e;(0,i.s)(t),(0,i.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,i.s)(t),(0,i.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)}}},7088:(t,e,o)=>{o.d(e,{I:()=>s,a:()=>a});var n=o(5244),i=o(9972);class s extends i.I{constructor(t,e,o){super(t,e,o),this.component=t}validateSuggestions(t){(0,n.a4)(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateSuggestions(this.component._suggestions)}}class a extends s{constructor(t,e,o){super(t,e,o),this.hasError=!1,this.component=t}validateType(t){(0,n.w)(this.component,"_type",(t=>"string"==typeof t&&n.ab.includes(t)),new Set([`String {${n.ab.join(", ")}`]),t)}validateHasCounter(t){(0,n.ac)(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateType(this.component._type),this.validateHasCounter(this.component._hasCounter)}}},5488:(t,e,o)=>{o.d(e,{a:()=>s,p:()=>a});var n=o(5244);const i=t=>{for((0,n.a0)()&&((0,n.h)("↓ Search form element start."),console.log(t));t instanceof HTMLElement&&"FORM"!==t.tagName&&"KOL-FORM"!==t.tagName;){try{t=t.parentElement instanceof HTMLElement?t.parentElement:t.parentNode instanceof ShadowRoot?t.parentNode.host:null}catch(t){}(0,n.a0)()&&(console.log(t),(0,n.h)("↑ Search form element finished."))}return t},s=(t={})=>{var e,o;const s=i(t.form);if(s instanceof HTMLElement){const t=new Event("reset",{bubbles:!0,cancelable:!0});if("FORM"===s.tagName)(0,n.a9)(t,s),s.dispatchEvent(t);else if("KOL-FORM"===s.tagName){(0,n.a9)(t,n.K.querySelector("form",s));const i=s;"function"==typeof(null===(e=i._on)||void 0===e?void 0:e.onReset)&&(null===(o=i._on)||void 0===o||o.onReset(t))}}},a=(t={})=>{var e,o;const s=i(t.form);if(s instanceof HTMLElement){const t=new SubmitEvent("submit",{bubbles:!0,cancelable:!0,submitter:s});if("FORM"===s.tagName)(0,n.a9)(t,s),s.dispatchEvent(t),s.submit();else if("KOL-FORM"===s.tagName){(0,n.a9)(t,n.K.querySelector("form",s));const i=s;"function"==typeof(null===(e=i._on)||void 0===e?void 0:e.onSubmit)&&(null===(o=i._on)||void 0===o||o.onSubmit(t))}}}},4572:(t,e,o)=>{o.d(e,{I:()=>a});var n=o(5244),i=o(9728);const s=(t,e)=>{const o=t;"object"==typeof o&&null!==o&&((0,n.H)(o.right,1)&&(o.right={icon:o.right}),(0,n.H)(o.left,1)&&(o.left={icon:o.left}),e.set("_icons",o))};class a extends i.I{constructor(t,e,o){super(t,e,o),this.component=t}validateIcon(t){this.validateIcons(t)}validateIcons(t){(0,n.t)(t,(()=>{try{t=(0,n.u)(t)}catch(t){}(0,n.w)(this.component,"_icons",(t=>"object"==typeof t&&null!==t&&((0,n.H)(t.left,1)||(0,n.a5)(t.left)||(0,n.H)(t.right,1)||(0,n.a5)(t.right))),new Set(["KoliBriHorizontalIcon"]),t,{hooks:{beforePatch:s},required:!0})}))}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons||this.component._icon)}}},3344:(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})}}]);