@public-ui/sample-react 1.7.11 → 1.7.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (87) hide show
  1. package/dist/104.js +1 -1
  2. package/dist/1296.js +1 -1
  3. package/dist/1461.js +1 -1
  4. package/dist/1684.js +1 -1
  5. package/dist/1728.js +2 -0
  6. package/dist/1888.js +1 -1
  7. package/dist/2120.js +1 -1
  8. package/dist/2240.js +1 -1
  9. package/dist/2444.js +1 -1
  10. package/dist/2628.js +1 -1
  11. package/dist/2740.js +1 -1
  12. package/dist/2764.js +1 -1
  13. package/dist/2782.js +1 -1
  14. package/dist/2812.js +1 -1
  15. package/dist/3200.js +1 -1
  16. package/dist/3204.js +1 -1
  17. package/dist/3564.js +1 -1
  18. package/dist/3920.js +1 -1
  19. package/dist/4064.js +1 -1
  20. package/dist/4136.js +1 -1
  21. package/dist/4184.js +1 -1
  22. package/dist/4544.js +1 -1
  23. package/dist/4728.js +1 -1
  24. package/dist/4915.js +1 -1
  25. package/dist/4988.js +1 -1
  26. package/dist/5336.js +2 -0
  27. package/dist/5376.js +1 -1
  28. package/dist/5456.js +1 -1
  29. package/dist/5615.js +1 -1
  30. package/dist/5628.js +1 -1
  31. package/dist/5744.js +1 -1
  32. package/dist/5768.js +1 -1
  33. package/dist/5839.js +1 -1
  34. package/dist/5956.js +1 -1
  35. package/dist/5972.js +1 -1
  36. package/dist/6040.js +1 -1
  37. package/dist/6272.js +1 -1
  38. package/dist/7192.js +1 -1
  39. package/dist/7312.js +1 -1
  40. package/dist/736.js +1 -1
  41. package/dist/7392.js +2 -0
  42. package/dist/7496.js +1 -1
  43. package/dist/7508.js +1 -1
  44. package/dist/7596.js +1 -1
  45. package/dist/7712.js +1 -1
  46. package/dist/7808.js +1 -1
  47. package/dist/8188.js +1 -1
  48. package/dist/8232.js +1 -1
  49. package/dist/8248.js +1 -1
  50. package/dist/828.js +1 -1
  51. package/dist/8476.js +1 -1
  52. package/dist/8524.js +1 -1
  53. package/dist/9088.js +1 -1
  54. package/dist/9096.js +2 -0
  55. package/dist/9404.js +1 -1
  56. package/dist/9424.js +1 -1
  57. package/dist/9496.js +1 -1
  58. package/dist/9680.js +1 -1
  59. package/dist/9888.js +1 -1
  60. package/dist/9984.js +1 -1
  61. package/dist/index.html +1 -1
  62. package/dist/main.css +1 -1
  63. package/dist/main.js +1 -1
  64. package/dist/main.js.LICENSE.txt +0 -2
  65. package/package.json +5 -6
  66. package/public/index.html +1 -1
  67. package/src/App.tsx +26 -23
  68. package/src/components/SampleDescription.tsx +23 -0
  69. package/src/components/input-text/hide-errors.tsx +25 -0
  70. package/src/components/input-text/routes.ts +2 -0
  71. package/src/scenarios/appointment-form/AppointmentForm.tsx +10 -4
  72. package/src/scenarios/appointment-form/AvailableAppointmentsForm.tsx +4 -9
  73. package/src/scenarios/appointment-form/DistrictForm.tsx +1 -8
  74. package/src/scenarios/appointment-form/PersonalInformationForm.tsx +20 -0
  75. package/src/scenarios/appointment-form/formUtils.ts +8 -0
  76. package/src/scenarios/routes.ts +3 -1
  77. package/src/scenarios/static-form.tsx +74 -0
  78. package/src/shares/HideMenusContext.ts +3 -0
  79. package/dist/4236.js +0 -2
  80. package/dist/4900.js +0 -2
  81. package/dist/5384.js +0 -2
  82. package/dist/616.js +0 -2
  83. package/src/scenarios/appointment-form/ErrorList.tsx +0 -35
  84. /package/dist/{4236.js.LICENSE.txt → 1728.js.LICENSE.txt} +0 -0
  85. /package/dist/{4900.js.LICENSE.txt → 5336.js.LICENSE.txt} +0 -0
  86. /package/dist/{5384.js.LICENSE.txt → 7392.js.LICENSE.txt} +0 -0
  87. /package/dist/{616.js.LICENSE.txt → 9096.js.LICENSE.txt} +0 -0
package/dist/main.js.LICENSE.txt CHANGED
@@ -2,8 +2,6 @@
2
2
  * KoliBri - The accessible HTML-Standard
3
3
  */
4
4
 
5
- /*!__STENCIL_STATIC_IMPORT_SWITCH__*/
6
-
7
5
  /**
8
6
  * @license React
9
7
  * react-dom.production.min.js
package/package.json CHANGED
@@ -1,15 +1,15 @@
1
1
  {
2
2
  "name": "@public-ui/sample-react",
3
- "version": "1.7.11",
3
+ "version": "1.7.12",
4
4
  "description": "This app contains samples for the KoliBri/Public UI",
5
5
  "license": "EUPL-1.2",
6
6
  "dependencies": {
7
7
  "@leanup/stack": "1.3.49",
8
8
  "@leanup/stack-react": "1.3.49",
9
9
  "@leanup/stack-webpack": "1.3.49",
10
- "@public-ui/components": "1.7.11",
11
- "@public-ui/react": "1.7.11",
12
- "@public-ui/themes": "1.7.11",
10
+ "@public-ui/components": "1.7.12",
11
+ "@public-ui/react": "1.7.12",
12
+ "@public-ui/themes": "1.7.12",
13
13
  "@types/node": "20.11.17",
14
14
  "@types/react": "18.2.55",
15
15
  "@types/react-dom": "18.2.19",
@@ -48,9 +48,8 @@
48
48
  "webpack.config.js"
49
49
  ],
50
50
  "scripts": {
51
- "clean": "git clean -f -d -X",
52
- "clean:locks": "rimraf package-lock.json pnpm-lock.yaml && npm run clean",
53
51
  "build": "rimraf dist && cross-env NODE_ENV=production webpack",
52
+ "build:deps": "pnpm --filter @public-ui/sample-react^... build",
54
53
  "format": "prettier --check src",
55
54
  "lint": "eslint \"{src,tests}/**/*.{html,js,json,jsx,ts,tsx,gql,graphql}\"",
56
55
  "serve": "cross-env NODE_ENV=development webpack serve --devtool=source-map",
package/public/index.html CHANGED
@@ -18,7 +18,7 @@
18
18
  <link rel="stylesheet" href="assets/tabler-icons/tabler-icons.css" />
19
19
  <link rel="stylesheet" href="main.css" />
20
20
  <meta name="robots" content="noindex" />
21
- <meta name="kolibri" content="dev-mode=false" />
21
+ <meta name="kolibri" content="dev-mode=false;experimental-mode=true;" />
22
22
  </head>
23
23
  <body>
24
24
  <div id="app"></div>
package/src/App.tsx CHANGED
@@ -3,13 +3,14 @@ import { Navigate, Route, Routes, useSearchParams } from 'react-router-dom';
3
3
  import { Route as MyRoute, Routes as MyRoutes } from './shares/types';
4
4
 
5
5
  import { Option } from '@public-ui/components';
6
+ import PackageJson from '@public-ui/components/package.json';
6
7
  import { KolAlert, KolBadge } from '@public-ui/react';
8
+ import { HideMenusContext } from './shares/HideMenusContext';
9
+ import { useLocation } from 'react-router';
10
+ import { Sidebar } from './components/Sidebar';
7
11
  import { ROUTES } from './shares/routes';
8
- import { isDraftTheme, Theme, THEME_OPTIONS } from './shares/theme';
9
- import PackageJson from '@public-ui/components/package.json';
10
12
  import { getTheme, getThemeName, setStorage, setTheme } from './shares/store';
11
- import { Sidebar } from './components/Sidebar';
12
- import { useLocation } from 'react-router';
13
+ import { THEME_OPTIONS, Theme, isDraftTheme } from './shares/theme';
13
14
 
14
15
  import { BackPage } from './components/BackPage';
15
16
 
@@ -118,26 +119,28 @@ export const App: FC = () => {
118
119
  };
119
120
 
120
121
  return (
121
- <div className={!hideMenus ? 'app-container' : ''} data-theme={theme}>
122
- {!hideMenus && (
123
- <Sidebar
124
- version={PackageJson.version}
125
- theme={theme}
126
- sample={routerLocation.pathname}
127
- routes={ROUTES}
128
- routeList={ROUTE_LIST}
129
- onThemeChange={handleThemeChange}
130
- />
131
- )}
122
+ <HideMenusContext.Provider value={hideMenus}>
123
+ <div className={!hideMenus ? 'app-container' : ''} data-theme={theme}>
124
+ {!hideMenus && (
125
+ <Sidebar
126
+ version={PackageJson.version}
127
+ theme={theme}
128
+ sample={routerLocation.pathname}
129
+ routes={ROUTES}
130
+ routeList={ROUTE_LIST}
131
+ onThemeChange={handleThemeChange}
132
+ />
133
+ )}
132
134
 
133
- <div className="p-4" id="route-container">
134
- {!hideMenus && isDraftTheme(theme) && <KolBadge className="mb-3" _label="DRAFT" _color="#db5461" />}
135
- <Routes>
136
- {ROUTE_TREE}
137
- <Route path="*" element={<KolAlert _type="info">This code example has not been migrated yet - it&#39;s coming soon!</KolAlert>} />
138
- <Route path="back-page" element={<BackPage />} />
139
- </Routes>
135
+ <div className="p-4" id="route-container">
136
+ {!hideMenus && isDraftTheme(theme) && <KolBadge className="mb-3" _label="DRAFT" _color="#db5461" />}
137
+ <Routes>
138
+ {ROUTE_TREE}
139
+ <Route path="*" element={<KolAlert _type="info">This code example has not been migrated yet - it&#39;s coming soon!</KolAlert>} />
140
+ <Route path="back-page" element={<BackPage />} />
141
+ </Routes>
142
+ </div>
140
143
  </div>
141
- </div>
144
+ </HideMenusContext.Provider>
142
145
  );
143
146
  };
package/src/components/SampleDescription.tsx ADDED
@@ -0,0 +1,23 @@
1
+ import type { FC, PropsWithChildren } from 'react';
2
+ import React, { useContext } from 'react';
3
+
4
+ import { KolIndentedText, KolLink } from '@public-ui/react';
5
+
6
+ import { HideMenusContext } from '../shares/HideMenusContext';
7
+
8
+ export const SampleDescription: FC<PropsWithChildren> = (props) => {
9
+ const hideMenus = useContext(HideMenusContext);
10
+
11
+ return hideMenus ? null : (
12
+ <div className="flex mb-sm">
13
+ <KolIndentedText>{props.children}</KolIndentedText>
14
+ <KolLink
15
+ _hideLabel
16
+ _href={`${location.href}?hideMenus`}
17
+ _label="Beispiel in neuem Tab öffnen"
18
+ _target="_blank"
19
+ className="mla flex-self-center"
20
+ ></KolLink>
21
+ </div>
22
+ );
23
+ };
package/src/components/input-text/hide-errors.tsx ADDED
@@ -0,0 +1,25 @@
1
+ import { KolAlert, KolCard, KolInputText } from '@public-ui/react';
2
+ import type { FC } from 'react';
3
+ import React from 'react';
4
+ import { SampleDescription } from '../SampleDescription';
5
+
6
+ export const InputTextHideErrors: FC = () => (
7
+ <div className="grid gap-4">
8
+ <SampleDescription>
9
+ This case shows the <code>_hideError</code> feature in the se. You can use the <code>_error</code> prop to show an error message.
10
+ </SampleDescription>
11
+ <KolCard _label="Normal input field with error" _level={0}>
12
+ <KolInputText _error="Error message" _label="Input with error" _touched />
13
+ </KolCard>
14
+ <KolCard _label="Input field with hidden error" _level={0}>
15
+ <fieldset className="grid md:grid-cols-2 gap-4">
16
+ <legend>Combined input field</legend>
17
+ <KolAlert className="col-span-2" _level={0} _type="error">
18
+ This is a combined error message
19
+ </KolAlert>
20
+ <KolInputText _error="This is a combined error message" _hideError _label="First input" _touched />
21
+ <KolInputText _error="This is a combined error message" _hideError _label="Second input with error" _touched />
22
+ </fieldset>
23
+ </KolCard>
24
+ </div>
25
+ );
package/src/components/input-text/routes.ts CHANGED
@@ -2,6 +2,7 @@ import { Routes } from '../../shares/types';
2
2
 
3
3
  import { InputTextBasic } from './basic';
4
4
  import { InputTextBlur } from './blur';
5
+ import { InputTextHideErrors } from './hide-errors';
5
6
  import { InputTextFocus } from './focus';
6
7
 
7
8
  export const INPUT_TEXT_ROUTES: Routes = {
@@ -9,5 +10,6 @@ export const INPUT_TEXT_ROUTES: Routes = {
9
10
  basic: InputTextBasic,
10
11
  blur: InputTextBlur,
11
12
  focus: InputTextFocus,
13
+ 'hide-errors': InputTextHideErrors,
12
14
  },
13
15
  };
package/src/scenarios/appointment-form/AppointmentForm.tsx CHANGED
@@ -1,9 +1,9 @@
1
- import React, { useEffect, useState } from 'react';
1
+ import React, { useEffect, useState, useRef } from 'react';
2
2
  import { KolTabs } from '@public-ui/react';
3
3
  import { DistrictForm } from './DistrictForm';
4
4
  import { Summary } from './Summary';
5
5
  import { PersonalInformationForm } from './PersonalInformationForm';
6
- import { Formik, FormikHelpers } from 'formik';
6
+ import { Formik, FormikHelpers, FormikProps } from 'formik';
7
7
  import * as Yup from 'yup';
8
8
  import { AvailableAppointmentsForm } from './AvailableAppointmentsForm';
9
9
  import { Iso8601 } from '@public-ui/components';
@@ -64,6 +64,7 @@ const availableAppointmentsSchema = {
64
64
  export function AppointmentForm() {
65
65
  const [activeFormSection, setActiveFormSection] = useState(FormSection.DISTRICT);
66
66
  const [selectedTab, setSelectedTab] = useState(activeFormSection);
67
+ const formikRef = useRef<FormikProps<FormValues>>(null);
67
68
 
68
69
  const validationSchema = Yup.object().shape({
69
70
  ...(activeFormSection === FormSection.DISTRICT ? districtSchema : {}),
@@ -86,7 +87,7 @@ export function AppointmentForm() {
86
87
  };
87
88
 
88
89
  return (
89
- <Formik<FormValues> initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit}>
90
+ <Formik<FormValues> innerRef={formikRef} initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit}>
90
91
  <KolTabs
91
92
  _tabs={[
92
93
  {
@@ -107,7 +108,12 @@ export function AppointmentForm() {
107
108
  ]}
108
109
  _label="Formular-Navigation"
109
110
  _selected={selectedTab}
110
- _on={{ onSelect: (_event, selectedTab) => setActiveFormSection(selectedTab) }}
111
+ _on={{
112
+ onSelect: (_event, selectedTab) => {
113
+ setActiveFormSection(selectedTab);
114
+ formikRef.current?.setErrors({});
115
+ },
116
+ }}
111
117
  >
112
118
  <div>
113
119
  <DistrictForm />
package/src/scenarios/appointment-form/AvailableAppointmentsForm.tsx CHANGED
@@ -1,16 +1,17 @@
1
1
  import React, { useEffect, useState } from 'react';
2
2
  import { KolButton, KolForm, KolHeading, KolInputDate, KolInputRadio, KolSpin } from '@public-ui/react';
3
3
  import { FormValues } from './AppointmentForm';
4
- import { ErrorList } from './ErrorList';
5
4
  import { Field, FieldProps, useFormikContext } from 'formik';
6
5
  import { fetchAvailableTimes } from './appointmentService';
7
6
  import { Option } from '@public-ui/components/src';
7
+ import { createErrorList } from './formUtils';
8
8
 
9
9
  export function AvailableAppointmentsForm() {
10
10
  const form = useFormikContext<FormValues>();
11
11
 
12
12
  const [sectionSubmitted, setSectionSubmitted] = useState(false);
13
13
  const [availableTimes, setAvailableTimes] = useState<Option<string>[] | null>(null);
14
+ const errorList = createErrorList(form.errors);
14
15
 
15
16
  useEffect(() => {
16
17
  let ignoreResponse = false;
@@ -36,14 +37,8 @@ export function AvailableAppointmentsForm() {
36
37
  return (
37
38
  <div className="p-2">
38
39
  <KolHeading _level={2} _label="Wählen Sie einen Termin aus"></KolHeading>
39
-
40
- {sectionSubmitted && Object.keys(form.errors).length ? (
41
- <div className="mt-2">
42
- <ErrorList errors={form.errors} />
43
- </div>
44
- ) : null}
45
-
46
40
  <KolForm
41
+ _errorList={sectionSubmitted ? errorList : []}
47
42
  _on={{
48
43
  onSubmit: () => {
49
44
  void form.submitForm();
@@ -81,7 +76,7 @@ export function AvailableAppointmentsForm() {
81
76
  <Field name="time">
82
77
  {({ field }: FieldProps<FormValues['time']>) => (
83
78
  <KolInputRadio
84
- id="field-date"
79
+ id="field-time"
85
80
  _label="Zeit"
86
81
  _orientation="horizontal"
87
82
  _options={availableTimes}
package/src/scenarios/appointment-form/DistrictForm.tsx CHANGED
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
2
2
  import { KolButton, KolForm, KolHeading, KolSelect } from '@public-ui/react';
3
3
  import { Field, FieldProps, useFormikContext } from 'formik';
4
4
  import { FormValues } from './AppointmentForm';
5
- import { ErrorListPropType } from '@public-ui/components';
5
+ import { createErrorList } from './formUtils';
6
6
 
7
7
  const LOCATION_OPTIONS = [
8
8
  {
@@ -32,13 +32,6 @@ export function DistrictForm() {
32
32
  const [sectionSubmitted, setSectionSubmitted] = useState(false);
33
33
  const errorList = createErrorList(form.errors);
34
34
 
35
- function createErrorList(formikErrors: Record<string, string>): ErrorListPropType[] {
36
- return Object.keys(formikErrors).map((fieldName) => ({
37
- message: formikErrors[fieldName],
38
- selector: `#field-${fieldName}`,
39
- }));
40
- }
41
-
42
35
  return (
43
36
  <div className="p-2">
44
37
  <KolHeading _level={2} _label="Wählen Sie einen Stadtteil aus"></KolHeading>
package/src/scenarios/appointment-form/PersonalInformationForm.tsx CHANGED
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
2
2
  import { KolButton, KolForm, KolHeading, KolInputEmail, KolInputText, KolSelect } from '@public-ui/react';
3
3
  import { Field, FieldProps, useFormikContext } from 'formik';
4
4
  import { FormValues } from './AppointmentForm';
5
+ import { createErrorList } from './formUtils';
5
6
 
6
7
  const SALUTATION_OPTIONS = [
7
8
  {
@@ -25,12 +26,14 @@ const SALUTATION_OPTIONS = [
25
26
  export function PersonalInformationForm() {
26
27
  const form = useFormikContext<FormValues>();
27
28
  const [sectionSubmitted, setSectionSubmitted] = useState(false);
29
+ const errorList = createErrorList(form.errors);
28
30
 
29
31
  return (
30
32
  <div className="p-2">
31
33
  <KolHeading _level={2} _label="Geben Sie Ihre Kontaktdaten ein"></KolHeading>
32
34
  <ul>{sectionSubmitted && Object.entries(form.errors).map(([field, error]) => <li key={field}>{error}</li>)}</ul>
33
35
  <KolForm
36
+ _errorList={sectionSubmitted ? errorList : []}
34
37
  _on={{
35
38
  onSubmit: () => {
36
39
  void form.submitForm();
@@ -41,6 +44,10 @@ export function PersonalInformationForm() {
41
44
  <Field name="salutation">
42
45
  {({ field }: FieldProps<FormValues['salutation']>) => (
43
46
  <KolSelect
47
+ onBlur={() => {
48
+ void form.setFieldTouched('salutation', true);
49
+ }}
50
+ id="field-salutation"
44
51
  _label="Anrede"
45
52
  _value={[field.value]}
46
53
  _error={form.errors.salutation || ''}
@@ -65,6 +72,10 @@ export function PersonalInformationForm() {
65
72
  {({ field }: FieldProps<FormValues['company']>) => (
66
73
  <div className="block mt-2">
67
74
  <KolInputText
75
+ onBlur={() => {
76
+ void form.setFieldTouched('company', true);
77
+ }}
78
+ id="field-company"
68
79
  _label="Firma"
69
80
  _value={field.value}
70
81
  _error={form.errors.company || ''}
@@ -88,6 +99,10 @@ export function PersonalInformationForm() {
88
99
  {({ field }: FieldProps<FormValues['name']>) => (
89
100
  <div className="block mt-2">
90
101
  <KolInputText
102
+ onBlur={() => {
103
+ void form.setFieldTouched('name', true);
104
+ }}
105
+ id="field-name"
91
106
  _label="Vor- und Zuname"
92
107
  _value={field.value}
93
108
  _error={form.errors.name || ''}
@@ -110,6 +125,10 @@ export function PersonalInformationForm() {
110
125
  {({ field }: FieldProps<FormValues['email']>) => (
111
126
  <div className="block mt-2">
112
127
  <KolInputEmail
128
+ onBlur={() => {
129
+ void form.setFieldTouched('email', true);
130
+ }}
131
+ id="field-email"
113
132
  _label="E-Mail"
114
133
  _value={field.value}
115
134
  _error={form.errors.email || ''}
@@ -132,6 +151,7 @@ export function PersonalInformationForm() {
132
151
  {({ field }: FieldProps<FormValues['phone']>) => (
133
152
  <div className="block mt-2">
134
153
  <KolInputText
154
+ id="field-phone"
135
155
  _type="tel"
136
156
  _label="Telefonnumer"
137
157
  _value={field.value}
package/src/scenarios/appointment-form/formUtils.ts ADDED
@@ -0,0 +1,8 @@
1
+ import type { ErrorListPropType } from '@public-ui/components';
2
+
3
+ export function createErrorList(formikErrors: Record<string, string>): ErrorListPropType[] {
4
+ return Object.keys(formikErrors).map((fieldName) => ({
5
+ message: formikErrors[fieldName],
6
+ selector: `#field-${fieldName}`,
7
+ }));
8
+ }
package/src/scenarios/routes.ts CHANGED
@@ -1,12 +1,14 @@
1
1
  import { Routes } from '../shares/types';
2
- import { TerminComponent } from './complex-form/component';
3
2
  import { AppointmentForm } from './appointment-form/AppointmentForm';
3
+ import { TerminComponent } from './complex-form/component';
4
4
  import { CustomTooltipWidth } from './custom-tooltip-width';
5
+ import { StaticForm } from './static-form';
5
6
 
6
7
  export const SCENARIO_ROUTES: Routes = {
7
8
  scenarios: {
8
9
  'complex-form': TerminComponent,
9
10
  'appointment-form': AppointmentForm,
10
11
  'custom-tooltip-width': CustomTooltipWidth,
12
+ 'static-form': StaticForm,
11
13
  },
12
14
  };
package/src/scenarios/static-form.tsx ADDED
@@ -0,0 +1,74 @@
1
+ import {
2
+ KolButton,
3
+ KolInputCheckbox,
4
+ KolInputColor,
5
+ KolInputDate,
6
+ KolInputEmail,
7
+ KolInputFile,
8
+ KolInputNumber,
9
+ KolInputPassword,
10
+ KolInputRadio,
11
+ KolInputRange,
12
+ KolInputText,
13
+ KolSelect,
14
+ KolTextarea,
15
+ } from '@public-ui/react';
16
+ import type { FC } from 'react';
17
+ import React from 'react';
18
+
19
+ export const StaticForm: FC = () => {
20
+ return (
21
+ <>
22
+ <p>This sample shows how you can use KoliBri in static form context, too.</p>
23
+ <ol>
24
+ <li>
25
+ First you have to enable the <code>experimental mode</code>:{' '}
26
+ <code className="bg-gray-200">&lt;meta name=&quot;kolibri&quot; content=&quot;dev-mode=false;experimental-mode=true;&quot; /&gt;</code>
27
+ </li>
28
+ <li>
29
+ Currently you have to use a native <code>form</code> element: <code className="bg-gray-200">&lt;form method=&quot;GET&quot;&gt;...&lt;/form&gt;</code>
30
+ </li>
31
+ <li>
32
+ It is important in static usage to give every input a <code>name</code> attribute:{' '}
33
+ <code className="bg-gray-200">&lt;KolInputColor _name=&quot;color&quot; _label=&quot;Color&quot; /&gt;</code>
34
+ </li>
35
+ <li>
36
+ Last of all one button should have the type <code>submit</code>:{' '}
37
+ <code className="bg-gray-200">&lt;KolButton _label=&quot;Submit&quot; _type=&quot;submit&quot; _variant=&quot;primary&quot; /&gt;</code>
38
+ </li>
39
+ </ol>
40
+ <form className="grid gap-4" method="get">
41
+ <KolInputCheckbox _name="checkbox" _label="Checkbox" />
42
+ <KolInputColor _name="color" _label="Color" />
43
+ <KolInputDate _name="date" _label="Date" />
44
+ <KolInputEmail _name="email" _label="Email" />
45
+ <KolInputFile _name="file" _label="File" />
46
+ <KolInputNumber _name="number" _label="Number" />
47
+ <KolInputPassword _name="password" _label="Password" />
48
+ <KolInputRadio
49
+ _name="radio"
50
+ _label="Radio"
51
+ _options={[
52
+ { label: 'Option A', value: 'A' },
53
+ { label: 'Option B', value: 'B' },
54
+ ]}
55
+ />
56
+ <KolInputRange _name="range" _label="Range" />
57
+ <KolInputText _name="text" _label="Text" />
58
+ <KolSelect
59
+ _name="select"
60
+ _label="Select"
61
+ _options={[
62
+ { label: 'Option A', value: 'A' },
63
+ { label: 'Option B', value: 'B' },
64
+ ]}
65
+ />
66
+ <KolTextarea _name="textarea" _label="Textarea" />
67
+ <div className="flex flex-wrap gap-4">
68
+ <KolButton _label="Submit" _type="submit" _variant="primary" />
69
+ <KolButton _label="Reset" _type="reset" />
70
+ </div>
71
+ </form>
72
+ </>
73
+ );
74
+ };
package/src/shares/HideMenusContext.ts ADDED
@@ -0,0 +1,3 @@
1
+ import { createContext } from 'react';
2
+
3
+ export const HideMenusContext = createContext<boolean | null>(null);
package/dist/4236.js DELETED
@@ -1,2 +0,0 @@
1
- /*! For license information please see 4236.js.LICENSE.txt */
2
- "use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[4236],{8644:(t,e,n)=>{n.d(e,{v:()=>i});var o=n(2288);const i=(t,e)=>{(0,o.v)(t,"_align",e)}},2288:(t,e,n)=>{n.d(e,{v:()=>r});var o=n(616);const i=new Set([...new Set(['"left", "right"']),...new Set(['"bottom", "top"'])]),r=(t,e,n)=>{(0,o.w)(t,e,(t=>"bottom"===t||"left"===t||"right"===t||"top"===t),i,n,{defaultValue:"top"})}},7672:(t,e,n)=>{n.d(e,{a:()=>gt,b:()=>pt,c:()=>xt,f:()=>yt,o:()=>W,s:()=>ht});var o=Object.defineProperty,i=Object.defineProperties,r=Object.getOwnPropertyDescriptors,l=Object.getOwnPropertySymbols,c=Object.prototype.hasOwnProperty,s=Object.prototype.propertyIsEnumerable,f=(t,e,n)=>e in t?o(t,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[e]=n,a=(t,e)=>{for(var n in e||(e={}))c.call(e,n)&&f(t,n,e[n]);if(l)for(var n of l(e))s.call(e,n)&&f(t,n,e[n]);return t},u=(t,e)=>i(t,r(e)),d=(t,e)=>{var n={};for(var o in t)c.call(t,o)&&e.indexOf(o)<0&&(n[o]=t[o]);if(null!=t&&l)for(var o of l(t))e.indexOf(o)<0&&s.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 p=Math.min,h=Math.max,y=Math.round,g=Math.floor,x=t=>({x:t,y:t}),v={left:"right",right:"left",bottom:"top",top:"bottom"},w={start:"end",end:"start"};function b(t,e,n){return h(t,p(e,n))}function R(t,e){return"function"==typeof t?t(e):t}function E(t){return t.split("-")[0]}function O(t){return t.split("-")[1]}function T(t){return"x"===t?"y":"x"}function L(t){return"y"===t?"height":"width"}function A(t){return["top","bottom"].includes(E(t))?"y":"x"}function P(t){return T(A(t))}function S(t){return t.replace(/start|end/g,(t=>w[t]))}function D(t){return t.replace(/left|right|bottom|top/g,(t=>v[t]))}function k(t){return"number"!=typeof t?function(t){return a({top:0,right:0,bottom:0,left:0},t)}(t):{top:t,right:t,bottom:t,left:t}}function C(t){return u(a({},t),{top:t.y,left:t.x,right:t.x+t.width,bottom:t.y+t.height})}function F(t,e,n){let{reference:o,floating:i}=t;const r=A(e),l=P(e),c=L(l),s=E(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 m;switch(s){case"top":m={x:a,y:o.y-i.height};break;case"bottom":m={x:a,y:o.y+o.height};break;case"right":m={x:o.x+o.width,y:u};break;case"left":m={x:o.x-i.width,y:u};break;default:m={x:o.x,y:o.y}}switch(O(e)){case"start":m[l]-=d*(n&&f?-1:1);break;case"end":m[l]+=d*(n&&f?-1:1)}return m}function H(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:d="viewport",elementContext:m="floating",altBoundary:p=!1,padding:h=0}=R(e,t),y=k(h),g=c[p?"floating"===m?"reference":"floating":m],x=C(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:d,strategy:s})),v="floating"===m?u(a({},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},E=C(r.convertOffsetParentRelativeRectToViewportRelativeRect?yield r.convertOffsetParentRelativeRectToViewportRelativeRect({elements:c,rect:v,offsetParent:w,strategy:s}):v);return{top:(x.top-E.top+y.top)/b.y,bottom:(E.bottom-x.bottom+y.bottom)/b.y,left:(x.left-E.left+y.left)/b.x,right:(E.right-x.right+y.right)/b.x}}))}const W=function(t){return void 0===t&&(t=0),{name:"offset",options:t,fn(e){return m(this,null,(function*(){var n,o;const{x:i,y:r,placement:l,middlewareData:c}=e,s=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=E(n),c=O(n),s="y"===A(n),f=["left","top"].includes(l)?-1:1,u=r&&s?-1:1,d=R(e,t);let{mainAxis:m,crossAxis:p,alignmentAxis:h}="number"==typeof d?{mainAxis:d,crossAxis:0,alignmentAxis:null}:a({mainAxis:0,crossAxis:0,alignmentAxis:null},d);return c&&"number"==typeof h&&(p="end"===c?-1*h:h),s?{x:p*u,y:m*f}:{x:m*f,y:p*u}}))}(e,t);return l===(null==(n=c.offset)?void 0:n.placement)&&null!=(o=c.arrow)&&o.alignmentOffset?{}:{x:i+s.x,y:r+s.y,data:u(a({},s),{placement:l})}}))}}};function _(t){return M(t)?(t.nodeName||"").toLowerCase():"#document"}function V(t){var e;return(null==t||null==(e=t.ownerDocument)?void 0:e.defaultView)||window}function B(t){var e;return null==(e=(M(t)?t.ownerDocument:t.document)||window.document)?void 0:e.documentElement}function M(t){return t instanceof Node||t instanceof V(t).Node}function j(t){return t instanceof Element||t instanceof V(t).Element}function z(t){return t instanceof HTMLElement||t instanceof V(t).HTMLElement}function N(t){return"undefined"!=typeof ShadowRoot&&(t instanceof ShadowRoot||t instanceof V(t).ShadowRoot)}function I(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 q(t){return["table","td","th"].includes(_(t))}function X(t){const e=Y(),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 Y(){return!("undefined"==typeof CSS||!CSS.supports)&&CSS.supports("-webkit-backdrop-filter","none")}function $(t){return["html","body","#document"].includes(_(t))}function G(t){return V(t).getComputedStyle(t)}function J(t){return j(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||B(t);return N(e)?e.host:e}function Q(t){const e=K(t);return $(e)?t.ownerDocument?t.ownerDocument.body:t.body:z(e)&&I(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=V(i);return r?e.concat(l,l.visualViewport||[],I(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=y(n)!==r||y(o)!==l;return c&&(n=r,o=l),{width:n,height:o,$:c}}function tt(t){return j(t)?t:t.contextElement}function et(t){const e=tt(t);if(!z(e))return x(1);const n=e.getBoundingClientRect(),{width:o,height:i,$:r}=Z(e);let l=(r?y(n.width):n.width)/o,c=(r?y(n.height):n.height)/i;return l&&Number.isFinite(l)||(l=1),c&&Number.isFinite(c)||(c=1),{x:l,y:c}}const nt=x(0);function ot(t){const e=V(t);return Y()&&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=x(1);e&&(o?j(o)&&(l=et(o)):l=et(t));const c=function(t,e,n){return void 0===e&&(e=!1),!(!n||e&&n!==V(t))&&e}(r,n,o)?ot(r):x(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=V(r),e=o&&j(o)?V(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=V(i),i=n.frameElement}}return C({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(B(t)).left+J(t).scrollLeft}function st(t,e,n){let o;if("viewport"===e)o=function(t,e){const n=V(t),o=B(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=Y();(!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=B(t),n=J(t),o=t.ownerDocument.body,i=h(e.scrollWidth,e.clientWidth,o.scrollWidth,o.clientWidth),r=h(e.scrollHeight,e.clientHeight,o.scrollHeight,o.clientHeight);let l=-n.scrollLeft+ct(t);const c=-n.scrollTop;return"rtl"===G(o).direction&&(l+=h(e.clientWidth,o.clientWidth)-i),{width:i,height:r,x:l,y:c}}(B(t));else if(j(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):x(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=u(a({},e),{x:e.x-n.x,y:e.y-n.y})}return C(o)}function ft(t,e){const n=K(t);return!(n===e||!j(n)||$(n))&&("fixed"===G(n).position||ft(n,e))}function at(t,e,n){const o=z(e),i=B(e),r="fixed"===n,l=it(t,!0,r,e);let c={scrollLeft:0,scrollTop:0};const s=x(0);if(o||!o&&!r)if(("body"!==_(e)||I(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=V(t);if(!z(t)||lt(t))return n;let o=ut(t,e);for(;o&&q(o)&&"static"===G(o).position;)o=ut(o,e);return o&&("html"===_(o)||"body"===_(o)&&"static"===G(o).position&&!X(o))?n:o||function(t){let e=K(t);for(;z(e)&&!$(e);){if(X(e))return e;e=K(e)}return null}(t)||n}const mt={convertOffsetParentRelativeRectToViewportRelativeRect:function(t){let{elements:e,rect:n,offsetParent:o,strategy:i}=t;const r="fixed"===i,l=B(o),c=!!e&&lt(e.floating);if(o===l||c&&r)return n;let s={scrollLeft:0,scrollTop:0},f=x(1);const a=x(0),u=z(o);if((u||!u&&!r)&&(("body"!==_(o)||I(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:B,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=>j(t)&&"body"!==_(t))),i=null;const r="fixed"===G(t).position;let l=r?K(t):t;for(;j(l)&&!$(l);){const e=G(l),n=X(l);n||"fixed"!==e.position||(i=null),(r?!n&&!i:!n&&"static"===e.position&&i&&["absolute","fixed"].includes(i.position)||I(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=h(o.top,t.top),t.right=p(o.right,t.right),t.bottom=p(o.bottom,t.bottom),t.left=h(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:a({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:j,isRTL:function(t){return"rtl"===G(t).direction}};function pt(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),d=i||r?[...f?U(f):[],...U(e)]:[];d.forEach((t=>{i&&t.addEventListener("scroll",n,{passive:!0}),r&&t.addEventListener("resize",n)}));const m=f&&c?function(t,e){let n,o=null;const i=B(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:d,width:m,height:y}=t.getBoundingClientRect();if(c||e(),!m||!y)return;const x={rootMargin:-g(d)+"px "+-g(i.clientWidth-(f+m))+"px "+-g(i.clientHeight-(d+y))+"px "+-g(f)+"px",threshold:h(0,p(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,u(a({},x),{root:i.ownerDocument}))}catch(t){o=new IntersectionObserver(w,x)}o.observe(t)}(!0),r}(f,n):null;let y,x=-1,v=null;l&&(v=new ResizeObserver((t=>{let[o]=t;o&&o.target===f&&v&&(v.unobserve(e),cancelAnimationFrame(x),x=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,y=requestAnimationFrame(e)}(),n(),()=>{var t;d.forEach((t=>{i&&t.removeEventListener("scroll",n),r&&t.removeEventListener("resize",n)})),null==m||m(),null==(t=v)||t.disconnect(),v=null,s&&cancelAnimationFrame(y)}}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=R(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=d(r,["mainAxis","crossAxis","limiter"]),m={x:n,y:o},p=yield H(e,f),h=A(E(i)),y=T(h);let g=m[y],x=m[h];if(l){const t="y"===y?"bottom":"right";g=b(g+p["y"===y?"top":"left"],g,g-p[t])}if(c){const t="y"===h?"bottom":"right";x=b(x+p["y"===h?"top":"left"],x,x-p[t])}const v=s.fn(u(a({},e),{[y]:g,[h]:x}));return u(a({},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=R(t,e),{mainAxis:u=!0,crossAxis:m=!0,fallbackPlacements:p,fallbackStrategy:h="bestFit",fallbackAxisSideDirection:y="none",flipAlignment:g=!0}=a,x=d(a,["mainAxis","crossAxis","fallbackPlacements","fallbackStrategy","fallbackAxisSideDirection","flipAlignment"]);if(null!=(n=r.arrow)&&n.alignmentOffset)return{};const v=E(i),w=E(c)===c,b=yield null==s.isRTL?void 0:s.isRTL(f.floating),T=p||(w||!g?[D(c)]:function(t){const e=D(t);return[S(t),e,S(e)]}(c));p||"none"===y||T.push(...function(t,e,n,o){const i=O(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[]}}(E(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 A=[c,...T],k=yield H(e,x),C=[];let F=(null==(o=r.flip)?void 0:o.overflows)||[];if(u&&C.push(k[v]),m){const t=function(t,e,n){void 0===n&&(n=!1);const o=O(t),i=P(t),r=L(i);let l="x"===i?o===(n?"end":"start")?"right":"left":"start"===o?"bottom":"top";return e.reference[r]>e.floating[r]&&(l=D(l)),[l,D(l)]}(i,l,b);C.push(k[t[0]],k[t[1]])}if(F=[...F,{placement:i,overflows:C}],!C.every((t=>t<=0))){var W,_;const t=((null==(W=r.flip)?void 0:W.index)||0)+1,e=A[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 V;const t=null==(V=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:V[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:u=0}=R(t,e)||{};if(null==f)return{};const d=k(u),m={x:n,y:o},h=P(i),y=L(h),g=yield l.getDimensions(f),x="y"===h,v=x?"top":"left",w=x?"bottom":"right",E=x?"clientHeight":"clientWidth",T=r.reference[y]+r.reference[h]-m[h]-r.floating[y],A=m[h]-r.reference[h],S=yield null==l.getOffsetParent?void 0:l.getOffsetParent(f);let D=S?S[E]:0;D&&(yield null==l.isElement?void 0:l.isElement(S))||(D=c.floating[E]||r.floating[y]);const C=T/2-A/2,F=D/2-g[y]/2-1,H=p(d[v],F),W=p(d[w],F),_=H,V=D-g[y]-W,B=D/2-g[y]/2+C,M=b(_,B,V),j=!s.arrow&&null!=O(i)&&B!==M&&r.reference[y]/2-(B<_?H:W)-g[y]/2<0,z=j?B<_?B-_:B-V:0;return{[h]:m[h]+z,data:a({[h]:M,centerOffset:B-M-z},j&&{alignmentOffset:z}),reset:j}}))}}),xt=(t,e,n)=>{const o=new Map,i=a({platform:mt},n),r=u(a({},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:d,y:m}=F(f,o,s),p=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:d,y:m,initialPlacement:o,placement:p,strategy:i,middlewareData:h,rects:f,platform:l,elements:{reference:t,floating:e}});d=null!=x?x:d,m=null!=v?v:m,h=u(a({},h),{[r]:a(a({},h[r]),w)}),b&&y<=50&&(y++,"object"==typeof b&&(b.placement&&(p=b.placement),b.rects&&(f=!0===b.rects?yield l.getElementRects({reference:t,floating:e,strategy:i}):b.rects),({x:d,y:m}=F(f,p,s))),n=-1)}return{x:d,y:m,placement:p,strategy:i,middlewareData:h}})))(t,e,u(a({},i),{platform:r}))}}}]);
package/dist/4900.js DELETED
@@ -1,2 +0,0 @@
1
- /*! For license information please see 4900.js.LICENSE.txt */
2
- "use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[4900],{4900:(t,e,i)=>{i.r(e),i.d(e,{initialize:()=>a});var l=i(6560),r=i(616);function n(t,e){try{Object.defineProperty((0,l.g)(),t,{get:function(){return e}})}catch(e){l.L.debug(`KoliBri property ${t} is already bind.`)}}const o=(t,e)=>l.L.debug(`${t} ${e?"":"not "}activated`),a=()=>{if((0,l.i)(),(0,l.e)()){(0,l.r)(),n("a11yColorContrast",r.q),n("querySelector",r.k),n("querySelectorAll",r.t),n("querySelectorColors",r.u),n("utils",(function(){return r.n})),n("parseJson",r.p),n("stringifyJson",r.v);const t=(0,l.a)().body,e=(0,l.a)().createElement("svg");if(e.setAttribute("aria-label","KoliBri-DevTools"),e.setAttribute("xmlns","http://www.w3.org/2000/svg"),e.setAttribute("role","toolbar"),e.setAttribute("style","position: fixed;color: black;font-size: 200%;bottom: 0.25rem;right: 0.25rem;"),e.innerHTML='<svg\n xmlns="http://www.w3.org/2000/svg"\n width="50"\n height="50"\n viewBox="0 0 600 600"\n>\n <path d="M353 322L213 304V434L353 322Z" fill="#047" />\n <path d="M209 564V304L149 434L209 564Z" fill="#047" />\n <path d="M357 316L417 250L361 210L275 244L357 316Z" fill="#047" />\n <path d="M353 318L35 36L213 300L353 318Z" fill="#047" />\n <path d="M329 218L237 92L250 222L272 241L329 218Z" fill="#047" />\n <path d="M391 286L565 272L421 252L391 286Z" fill="#047" />\n</svg>',(0,l.a)().body.appendChild(e),o("Development mode",(0,l.e)()),o("Experimental mode",(0,l.d)()),o("Color contrast analysis",(0,l.f)()),(0,l.f)()){const e=setTimeout((()=>{clearTimeout(e),setInterval((()=>{r.n.queryHtmlElementColors((0,l.a)().createElement("div"),(0,r.q)(t),!1,!1)}),1e4)}),2500)}}}}}]);
package/dist/5384.js DELETED
@@ -1,2 +0,0 @@
1
- /*! For license information please see 5384.js.LICENSE.txt */
2
- "use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[5384],{787:(t,e,o)=>{o.d(e,{A:()=>a});var n=o(616),i=o(6764);const s=(0,o(6560).d)();class a{constructor(t,e,o){var n,a;if(this.setFormAssociatedValue=t=>{var e;const o=null===(e=this.formAssociated)||void 0===e?void 0:e.getAttribute("name");null!==o&&""!==o||(0,i.d)(` The form field (${this.name}) must have a name attribute to be form-associated. Please define the _name attribute.`);const n=this.tryToStringifyValue(t);this.syncValue(t,n,this.formAssociated),this.syncValue(t,n,this.syncToOwnInput)},this.component=t,this.host=this.findHostWithShadowRoot(o),this.name=e,s){switch(null===(n=this.host)||void 0===n||n.querySelectorAll("input,select,textarea").forEach((t=>{var e;null===(e=this.host)||void 0===e||e.removeChild(t)})),this.name){case"button":this.formAssociated=document.createElement("button");break;case"select":this.formAssociated=document.createElement("select"),this.formAssociated.setAttribute("multiple","");break;case"textarea":this.formAssociated=document.createElement("textarea");break;default:this.formAssociated=document.createElement("input"),this.formAssociated.setAttribute("type","hidden")}this.formAssociated.setAttribute("aria-hidden","true"),this.formAssociated.setAttribute("data-form-associated",""),this.formAssociated.setAttribute("hidden",""),null===(a=this.host)||void 0===a||a.appendChild(this.formAssociated)}}findHostWithShadowRoot(t){for(;null===(null==t?void 0:t.shadowRoot)&&t!==document.body;)(t=null==t?void 0:t.parentNode).host&&(t=t.host);return t}setAttribute(t,e,o){if(s)try{if("boolean"!=typeof(o="object"==typeof o&&null!==o?JSON.stringify(o):o)&&"number"!=typeof o&&"string"!=typeof o)throw new Error("Invalid value type: "+typeof o);null==e||e.setAttribute(t,`${o}`)}catch(o){null==e||e.removeAttribute(t)}}tryToStringifyValue(t){try{return"object"==typeof t&&null!==t?JSON.stringify(t).toString():null==t?null:t.toString()}catch(t){return(0,i.h)(`The form field raw value is not able to stringify! ${t}`),""}}syncValue(t,e,o){o&&("select"===this.name?(o.querySelectorAll("option").forEach((t=>{o.removeChild(t)})),Array.isArray(t)&&t.forEach((t=>{const e=this.tryToStringifyValue(t);if("string"==typeof e){const t=document.createElement("option");t.setAttribute("value",e),t.setAttribute("selected",""),o.appendChild(t)}}))):"string"==typeof e?(o.setAttribute("value",e),o.value=e):(o.removeAttribute("value"),o.value=""))}validateName(t){((t,e,o)=>{(0,n.d)(t,"_name",e,o)})(this.component,t,{hooks:{afterPatch:()=>{this.setAttribute("name",this.formAssociated,this.component.state._name)}}}),void 0===t&&(0,i.d)("Ein Name am Eingabefeldern oder Schalter ist nicht zwingend erforderlich, kann aber für die Autocomplete-Funktion und für das statische Versenden des Eingabefeldes relevant sein.")}validateSyncValueBySelector(t){if(s&&"string"==typeof t){const e=document.querySelector(t);e&&(this.syncToOwnInput=e)}}componentWillLoad(){this.validateName(this.component._name),this.validateSyncValueBySelector(this.component._syncValueBySelector)}}},8851:(t,e,o)=>{o.d(e,{I:()=>u,g:()=>h});var n=o(616),i=o(1120),s=o(8948),a=o(6764),r=o(1500),c=o(628),l=o(787);const h=t=>{const e="string"==typeof t._error&&t._error.length>0&&!0===t._touched,o="string"==typeof t._hint&&t._hint.length>0,n=[];return!0===e&&n.push(`${t._id}-error`),!0===o&&n.push(`${t._id}-hint`),{hasError:e,hasHint:o,ariaDescribedBy:n}};class d extends l.A{constructor(t,e,o){super(t,e,o),this.component=t}validateAlert(t){(0,n.a)(this.component,"_alert",t)}validateTouched(t){((t,e)=>{(0,n.a)(t,"_touched",e)})(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateAlert(this.component._alert),this.validateTouched(this.component._touched)}}class u extends d{constructor(t,e,o){super(t,e,o),this.valueChangeListeners=[],this.onFacade={onBlur:this.onBlur.bind(this),onChange:this.onChange.bind(this),onClick:this.onClick.bind(this),onFocus:this.onFocus.bind(this)},this.component=t}validateAccessKey(t){(0,n.d)(this.component,"_accessKey",t)}validateAdjustHeight(t){((t,e)=>{(0,n.a)(t,"_adjustHeight",e)})(this.component,t)}validateDisabled(t){(0,n.a)(this.component,"_disabled",t),!0===t&&(0,a.g)()}validateError(t){(0,n.d)(this.component,"_error",t)}validateHideError(t){((t,e,o)=>{(0,n.a)(t,"_hideError",e,o)})(this.component,t,{hooks:{afterPatch:()=>{this.component.state._hideError&&(0,a.a)("Property hide-error for inputs: Only use when the error message is shown outside of the input component.")}}})}validateHideLabel(t){(0,i.v)(this.component,t,{hooks:{afterPatch:()=>{this.component.state._hideLabel&&(0,a.a)("Property hide-label for inputs: Only use for exceptions like search inputs that are clearly identifiable by their context.")}}})}validateHint(t){(0,n.d)(this.component,"_hint",t)}validateId(t){(0,n.d)(this.component,"_id",t,{hooks:{afterPatch:()=>{this.setAttribute("id",this.formAssociated,this.component.state._id)}},minLength:1}),""!==t&&void 0!==t||(0,a.d)("Eine eindeutige ID an den Eingabefeldern ist nicht zwingend erforderlich, könnte aber für die E2E-Tests relevant sein.")}validateLabel(t){(0,s.a)(this.component,t,{required:!0})}validateOn(t){"object"==typeof t&&(0,n.s)(this.component,"_on",t)}validateSmartButton(t){(0,n.o)(t,(()=>{try{t=(0,n.p)(t)}catch(t){}(0,n.s)(this.component,"_smartButton",t)}))}validateTabIndex(t){(0,c.v)(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateAccessKey(this.component._accessKey),this.validateAdjustHeight(this.component._adjustHeight),this.validateError(this.component._error),this.validateDisabled(this.component._disabled),this.validateHideError(this.component._hideError),this.validateHideLabel(this.component._hideLabel),this.validateHint(this.component._hint),this.validateId(this.component._id),this.validateLabel(this.component._label),this.validateSmartButton(this.component._smartButton),this.validateOn(this.component._on),this.validateTabIndex(this.component._tabIndex)}onBlur(t){var e;this.component._alert=!0,this.component._touched=!0,(0,r.s)(t),(0,r.t)("blur",this.host),"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onBlur)&&this.component._on.onBlur(t)}onChange(t){var e;const o=t.target.value;(0,r.t)("change",this.host,o),this.setFormAssociatedValue(o),"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onChange)&&this.component._on.onChange(t,o),this.valueChangeListeners.forEach((t=>t(o)))}onClick(t){var e;(0,r.s)(t),(0,r.t)("click",this.host),"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onClick)&&this.component._on.onClick(t)}onFocus(t){var e;this.component._alert=!0,(0,r.s)(t),(0,r.t)("focus",this.host),"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onFocus)&&this.component._on.onFocus(t)}setValue(t,e){var o;this.setFormAssociatedValue(e),"function"==typeof(null===(o=this.component._on)||void 0===o?void 0:o.onChange)&&this.component._on.onChange(t,e)}addValueChangeListener(t){this.valueChangeListeners.push(t)}}},5384:(t,e,o)=>{o.d(e,{I:()=>c});var n=o(3128),i=o(616),s=o(5776),a=o(8851);const r=(t,e)=>{const o=t;"object"==typeof o&&null!==o&&((0,s.i)(o.right,1)&&(o.right={icon:o.right}),(0,s.i)(o.left,1)&&(o.left={icon:o.left}),e.set("_icons",o))};class c extends a.I{constructor(t,e,o){super(t,e,o),this.component=t}validateIcon(t){this.validateIcons(t)}validateIcons(t){(0,i.o)(t,(()=>{try{t=(0,i.p)(t)}catch(t){}(0,i.w)(this.component,"_icons",(t=>"object"==typeof t&&null!==t&&((0,s.i)(t.left,1)||(0,n.i)(t.left)||(0,s.i)(t.right,1)||(0,n.i)(t.right))),new Set(["KoliBriHorizontalIcon"]),t,{hooks:{beforePatch:r},required:!0})}))}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons||this.component._icon)}}},1500:(t,e,o)=>{function n(t){t.stopImmediatePropagation(),t.stopPropagation()}function i(t,e,o){e&&function(t,e,o){const n=t.dispatchEvent(function(t,e){return new CustomEvent(`kol-${t}`,{bubbles:!0,cancelable:!0,composed:!0,detail:e})}(e,o))}(e,t,o)}o.d(e,{s:()=>n,t:()=>i})},1120:(t,e,o)=>{o.d(e,{v:()=>i});var n=o(616);const i=(t,e,o={})=>{(0,n.a)(t,"_hideLabel",e,o)}},3128:(t,e,o)=>{o.d(e,{i:()=>r,v:()=>c,w:()=>l});var n=o(616),i=o(5776);const s=(t,e,o)=>{(0,i.c)(o)?t[e]=o:(0,i.i)(o,1)&&(t[e]={icon:o})},a=t=>{var e,o,n;if(null===(e=t.nextState)||void 0===e?void 0:e.has("_icons")){const e=null===(o=t.nextState)||void 0===o?void 0:o.get("_icons");null===(n=t.nextState)||void 0===n||n.set("_icons",(t=>{let e={};return(0,i.i)(t,1)?e={left:{icon:t}}:"object"==typeof t&&null!==t&&(s(e,"top",t.top),s(e,"right",t.right),s(e,"bottom",t.bottom),s(e,"left",t.left)),e})(e))}},r=t=>"object"==typeof t&&null!==t&&(void 0===t.style||(0,i.b)(t.style))&&(0,i.i)(t.icon,1),c=(t,e,o={})=>{(0,n.o)(e,(()=>{var s;try{e=(0,n.p)(e)}catch(t){}(0,n.w)(t,"_icons",(t=>null===t||(0,i.i)(t,1)||"object"==typeof t&&null!==t&&((0,i.i)(t.left,1)||r(t.left)||(0,i.i)(t.right,1)||r(t.right)||(0,i.i)(t.top,1)||r(t.top)||(0,i.i)(t.bottom,1)||r(t.bottom))),new Set(["KoliBriIcon"]),e,Object.assign(Object.assign({},o),{defaultValue:{},hooks:{afterPatch:null===(s=o.hooks)||void 0===s?void 0:s.afterPatch,beforePatch:(t,e,n,i)=>{var s,r;"function"==typeof(null===(s=o.hooks)||void 0===s?void 0:s.beforePatch)&&(null===(r=o.hooks)||void 0===r||r.beforePatch(t,e,n,i)),a(n)}}}))}))},l=(t,e)=>{(0,n.w)(t,"_iconAlign",(t=>"left"===t||"right"===t),new Set(["Alignment {left, right, top, bottom}"]),e,{hooks:{beforePatch:()=>{a(t)}}})}},8948:(t,e,o)=>{o.d(e,{a:()=>d,c:()=>c,h:()=>r,v:()=>h});var n=o(6764),i=o(616);const s=/[a-zA-Z0-9äöüÄÖÜß]/g,a=/^\d+$/;function r(t,e=1){return function(t){var e;return"string"==typeof t&&(null===(e=t.match(s))||void 0===e?void 0:e.length)||0}(t)>=e}function c(t){return a.test(t)}const l=new Set(["string"]),h=(t,e,o={})=>{(0,i.w)(t,"_label",(t=>"string"==typeof t),l,e,function(t){var e;return Object.assign(Object.assign({},t),{hooks:{afterPatch:(e,o,i,s)=>{var a,l;"function"==typeof(null===(a=t.hooks)||void 0===a?void 0:a.afterPatch)&&(null===(l=t.hooks)||void 0===l||l.afterPatch(e,o,i,s)),"string"==typeof e&&!1===r(e,3)&&!1===c(e)&&(0,n.a)(`The heading or label ("${e}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof e&&e.length>80&&(0,n.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(e=t.hooks)||void 0===e?void 0:e.beforePatch}})}(o))},d=h},628:(t,e,o)=>{o.d(e,{v:()=>a});var n=o(6764),i=o(616);const s={hooks:{afterPatch:t=>{-1!==t&&0!==t&&(0,n.a)("Don’t Use Tabindex Greater than 0: https://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html")}}},a=(t,e)=>{(0,i.e)(t,"_tabIndex",e,s)}}}]);
package/dist/616.js DELETED
@@ -1,2 +0,0 @@
1
- /*! For license information please see 616.js.LICENSE.txt */
2
- "use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[616],{6764:(e,t,r)=>{r.d(t,{a:()=>s,b:()=>g,c:()=>v,d:()=>a,e:()=>c,f:()=>h,g:()=>b,h:()=>u,u:()=>p});var n=r(6560);const o=new Set,s=(e,t)=>{(!1===o.has(e)||(null==t?void 0:t.force))&&(o.add(e),n.L.debug([e].concat((null==t?void 0:t.details)||[]),{classifier:"✋ a11y",overwriteStyle:"; background-color: #09f"}))},i=new Set,c=(e,t)=>{(!1===i.has(e)||(null==t?void 0:t.force))&&(i.add(e),n.L.warn([e].concat((null==t?void 0:t.details)||[]),{classifier:"🔥 deprecated",overwriteStyle:"; background-color: #f00"}))},l=new Set,a=(e,t)=>{(!1===l.has(e)||(null==t?void 0:t.force))&&(l.add(e),n.L.debug([e].concat((null==t?void 0:t.details)||[]),{classifier:"💻 dev",overwriteStyle:"; background-color: #f09"}))},u=(e,t)=>{(!1===l.has(e)||(null==t?void 0:t.force))&&(l.add(e),n.L.warn([e].concat((null==t?void 0:t.details)||[]),{classifier:"💻 dev",overwriteStyle:"; background-color: #f09"}))},d=new Set,h=(e,t=!1,r)=>{(!1===d.has(e)||(null==r?void 0:r.force))&&(d.add(e),e+=!0===t?" ✅":"",n.L.debug([e].concat((null==r?void 0:r.details)||[]),{classifier:"🌟 feature",overwriteStyle:"; background-color: #309"}))};a("Wir freuen uns über jedes Feedback, Kommentare, Screenshots oder Demo-Links von einer auf KoliBri-basierenden Anwendung (kolibri@itzbund.de). Vielen Dank!");const f=new Set,p=(e,t)=>{(!1===f.has(e)||(null==t?void 0:t.force))&&(f.add(e),n.L.debug([e].concat((null==t?void 0:t.details)||[]),{classifier:"📑 ui/ux",overwriteStyle:"; background-color: #060;"}))},b=()=>{s('"Disabled" schränkt die Zugänglichkeit und Sichtbarkeit ein. Wir empfehlen aus Sicht der Barrierefreiheit readonly- statt disabled-Attribut zu verwenden.\n- https://uxdesign.cc/is-it-ok-to-grey-out-disabled-buttons-8afa74a0fae')},g=e=>{"string"==typeof e&&""!==e||s("Manche Strukturelemente, wie bspw. der nav-Tag, können mehrfach in einer Webseite verwendet werden. Damit die gleichnamigen Strukturelemente voneinander unterschieden werden können, ist es erforderlich ein Aria-Label zu setzen.\n- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Navigation_Role#accessibility_concerns")},v=(e,t=8)=>{t>7&&p(`[${e}] Innerhalb von Navigationsstrukturen wird empfohlen nicht mehr als 7 Menüpunkte zu verwenden.\n\nLinks:\n- https://de.ryte.com/wiki/Millersche_Zahl\n- https://de.wikipedia.org/wiki/Millersche_Zahl`)}},616:(e,t,r)=>{r.d(t,{K:()=>Me,a:()=>ce,b:()=>X,c:()=>ue,d:()=>le,e:()=>ae,f:()=>ne,g:()=>re,h:()=>Te,i:()=>me,j:()=>Le,k:()=>we,l:()=>ye,m:()=>pe,n:()=>Oe,o:()=>te,p:()=>ve,q:()=>Ne,r:()=>b,s:()=>oe,t:()=>Se,u:()=>Ee,v:()=>be,w:()=>ie});var n=r(7916),o=r(6764),s=r(6560);const i=(e,t)=>{t.forEach((t=>{!1===e.has(t)&&e.add(t)}))},c=(e,t=document)=>{if(t instanceof Document||t instanceof HTMLElement||t instanceof ShadowRoot){const r=new Set;i(r,t.querySelectorAll(e));const n=t.querySelectorAll('[class*="hydrated"]');for(let t=0;t<n.length;t++){const o=n[t].shadowRoot;i(r,c(e,"object"==typeof o&&null!==o?o:n[t]))}return Array.from(r)}throw new Error("The parameter document for the method querySelectorAll is not type of Document, HTMLElement or ShadowRoot.")},l=(e,t=document)=>{if(t instanceof Document||t instanceof HTMLElement||t instanceof ShadowRoot){let r=t.querySelector(e);if(null===r){const n=t.querySelectorAll('[class*="hydrated"]');for(let t=0;t<n.length;t++){const o=n[t].shadowRoot;if(r=l(e,"object"==typeof o&&null!==o?o:n[t]),null!==r)break}}return r}throw new Error("The parameter document for the method querySelector is not type of Document, HTMLElement or ShadowRoot.")};var a={exports:{}};function u(e){var t=d(e);return 3==t.length?t.concat(255):(t[3]=Math.round(t[3]),t)}function d(e){return"string"==typeof e?("red"==(t=e=e.toLowerCase())?[255,0,0]:"green"==t?[0,255,0]:"blue"==t?[0,0,255]:"black"==t?[0,0,0]:"white"==t?[255,255,255]:"cyan"==t?[0,255,255]:"gray"==t||"grey"==t?[128,128,128]:"magenta"==t||"pink"==t?[255,0,255]:"yellow"==t?[255,255,0]:void 0)||function(e){var t=e.replace(/^#/,""),r=t.length;if(3==r||4==r){var n=f(t[0]),o=f(t[1]),s=f(t[2]),i=3==r?255:f(t[3]);if(isNaN(n)||isNaN(o)||isNaN(s)||isNaN(i))return;return[n,o,s,i]}}(e)||function(e){var t=e.replace(/^#/,""),r=t.length;if(6==r||8==r){var n=f(t.slice(0,2)),o=f(t.slice(2,4)),s=f(t.slice(4,6)),i=6==r?255:f(t.slice(6,8));if(isNaN(n)||isNaN(o)||isNaN(s)||isNaN(i))return;return[n,o,s,i]}}(e)||function(e){if("rgb("==e.substr(0,4)){var t=(e=e.match(/^rgb\(([^)]+)\)/)[1]).split(/ *, */).map(Number),r=p(t[0],!0),n=p(t[1],!0),o=p(t[2],!0);if(-1!=r&&-1!=n&&-1!=o)return[r,n,o,255]}}(e)||function(e){if("rgba("==e.substr(0,5)){var t=(e=e.match(/^rgba\(([^)]+)\)/)[1]).split(/ *, */).map(Number),r=p(t[0],!0),n=p(t[1],!0),o=p(t[2],!0),s=p(255*t[3]);if(-1!=r&&-1!=n&&-1!=o&&-1!=s)return[r,n,o,s]}}(e)||[0,0,0,255]:function(e){if("[object Object]"===Object.prototype.toString.call(e)&&Object.getPrototypeOf(e)===Object.getPrototypeOf({})){var t=p(null!=e.r?e.r:null!=e.red?e.red:0,!0),r=p(null!=e.g?e.g:null!=e.green?e.green:0,!0),n=p(null!=e.b?e.b:null!=e.blue?e.blue:0,!0),o=p(null!=e.a?e.a:null!=e.alpha?e.alpha:255,!0);if(-1!=t&&-1!=r&&-1!=n&&-1!=o)return[t,r,n,o]}}(e)||function(e){if(Array.isArray(e)&&(3==e.length||4==e.length)){var t=p(e[0],!0),r=p(e[1],!0),n=p(e[2],!0),o=p(null!=e[3]?e[3]:255,!0);if(-1!=t&&-1!=r&&-1!=n&&-1!=o)return[t,r,n,o]}}(e)||function(e){if("number"==typeof e&&Math.floor(e)==e&&e<=4294967295&&e>=0)return[e>>16&255,e>>8&255,255&e,e>>24&255]}(e)||[0,0,0,255];var t}function h(e){var t=e.toString(16);return 1==t.length?"0"+t:t}function f(e){return 1==e.length?parseInt(e+e,16):parseInt(e,16)}function p(e,t){return"number"!=typeof e||!0===t&&Math.floor(e)!==e?-1:e>=0&&e<=255?e:-1}a.exports=u,a.exports.arr=u,a.exports.obj=function(e){var t=d(e);return{r:t[0],g:t[1],b:t[2],a:3==t.length?255:Math.round(t[3])}},a.exports.css=function(e){var t=d(e);return 3==t.length&&t.push(255),255==t[3]?"rgb("+t[0]+", "+t[1]+", "+t[2]+")":0==t[3]?"rgba("+t[0]+", "+t[1]+", "+t[2]+", 0)":"rgba("+t[0]+", "+t[1]+", "+t[2]+", "+String(t[3]/255).substr(1)+")"},a.exports.hex=function(e){3==(s=d(e)).length&&s.push(255);var t=255==s[3],r=h(s[0]),n=h(s[1]),o=h(s[2]),s=h(Math.round(s[3])),i=function(e,t,r,n){var o=["ff","00","11","22","33","44","55","66","77","88","99","aa","bb","cc","dd","ee"];return-1!=o.indexOf(e)&&-1!=o.indexOf(t)&&-1!=o.indexOf(r)&&-1!=o.indexOf(n)}(r,n,o,s);return t?i?"#"+r.charAt(0)+n.charAt(0)+o.charAt(0):"#"+r+n+o:i?"#"+r.charAt(0)+n.charAt(0)+o.charAt(0)+s.charAt(0):"#"+r+n+o+s},a.exports.num=function(e){var t=d(e);return 3==t.length?t.push(255):t[3]=Math.round(t[3]),(t[3]<<24>>>0|t[0]<<16|t[1]<<8|t[2])>>>0};const b=a.exports;function g(e){return"function"==typeof e}function v(e){const t=e((e=>{Error.call(e),e.stack=(new Error).stack}));return t.prototype=Object.create(Error.prototype),t.prototype.constructor=t,t}const m=v((e=>function(t){e(this),this.message=t?`${t.length} errors occurred during unsubscription:\n${t.map(((e,t)=>`${t+1}) ${e.toString()}`)).join("\n ")}`:"",this.name="UnsubscriptionError",this.errors=t}));function y(e,t){if(e){const r=e.indexOf(t);0<=r&&e.splice(r,1)}}class w{constructor(e){this.initialTeardown=e,this.closed=!1,this._parentage=null,this._finalizers=null}unsubscribe(){let e;if(!this.closed){this.closed=!0;const{_parentage:t}=this;if(t)if(this._parentage=null,Array.isArray(t))for(const e of t)e.remove(this);else t.remove(this);const{initialTeardown:r}=this;if(g(r))try{r()}catch(t){e=t instanceof m?t.errors:[t]}const{_finalizers:n}=this;if(n){this._finalizers=null;for(const t of n)try{k(t)}catch(t){e=null!=e?e:[],t instanceof m?e=[...e,...t.errors]:e.push(t)}}if(e)throw new m(e)}}add(e){var t;if(e&&e!==this)if(this.closed)k(e);else{if(e instanceof w){if(e.closed||e._hasParent(this))return;e._addParent(this)}(this._finalizers=null!==(t=this._finalizers)&&void 0!==t?t:[]).push(e)}}_hasParent(e){const{_parentage:t}=this;return t===e||Array.isArray(t)&&t.includes(e)}_addParent(e){const{_parentage:t}=this;this._parentage=Array.isArray(t)?(t.push(e),t):t?[t,e]:e}_removeParent(e){const{_parentage:t}=this;t===e?this._parentage=null:Array.isArray(t)&&y(t,e)}remove(e){const{_finalizers:t}=this;t&&y(t,e),e instanceof w&&e._removeParent(this)}}w.EMPTY=(()=>{const e=new w;return e.closed=!0,e})();const S=w.EMPTY;function x(e){return e instanceof w||e&&"closed"in e&&g(e.remove)&&g(e.add)&&g(e.unsubscribe)}function k(e){g(e)?e():e.unsubscribe()}const _={onUnhandledError:null,onStoppedNotification:null,Promise:void 0,useDeprecatedSynchronousErrorHandling:!1,useDeprecatedNextContext:!1},N={setTimeout(e,t,...r){const{delegate:n}=N;return(null==n?void 0:n.setTimeout)?n.setTimeout(e,t,...r):setTimeout(e,t,...r)},clearTimeout(e){const{delegate:t}=N;return((null==t?void 0:t.clearTimeout)||clearTimeout)(e)},delegate:void 0};function E(){}const A=L("C",void 0,void 0);function L(e,t,r){return{kind:e,value:t,error:r}}let O=null;function T(e){if(_.useDeprecatedSynchronousErrorHandling){const t=!O;if(t&&(O={errorThrown:!1,error:null}),e(),t){const{errorThrown:e,error:t}=O;if(O=null,e)throw t}}else e()}class M extends w{constructor(e){super(),this.isStopped=!1,e?(this.destination=e,x(e)&&e.add(this)):this.destination=$}static create(e,t,r){return new j(e,t,r)}next(e){this.isStopped?z(function(e){return L("N",e,void 0)}(e),this):this._next(e)}error(e){this.isStopped?z(L("E",void 0,e),this):(this.isStopped=!0,this._error(e))}complete(){this.isStopped?z(A,this):(this.isStopped=!0,this._complete())}unsubscribe(){this.closed||(this.isStopped=!0,super.unsubscribe(),this.destination=null)}_next(e){this.destination.next(e)}_error(e){try{this.destination.error(e)}finally{this.unsubscribe()}}_complete(){try{this.destination.complete()}finally{this.unsubscribe()}}}const C=Function.prototype.bind;function P(e,t){return C.call(e,t)}class H{constructor(e){this.partialObserver=e}next(e){const{partialObserver:t}=this;if(t.next)try{t.next(e)}catch(e){D(e)}}error(e){const{partialObserver:t}=this;if(t.error)try{t.error(e)}catch(e){D(e)}else D(e)}complete(){const{partialObserver:e}=this;if(e.complete)try{e.complete()}catch(e){D(e)}}}class j extends M{constructor(e,t,r){let n;if(super(),g(e)||!e)n={next:null!=e?e:void 0,error:null!=t?t:void 0,complete:null!=r?r:void 0};else{let t;this&&_.useDeprecatedNextContext?(t=Object.create(e),t.unsubscribe=()=>this.unsubscribe(),n={next:e.next&&P(e.next,t),error:e.error&&P(e.error,t),complete:e.complete&&P(e.complete,t)}):n=e}this.destination=new H(n)}}function D(e){var t;t=e,N.setTimeout((()=>{const{onUnhandledError:e}=_;if(!e)throw t;e(t)}))}function z(e,t){const{onStoppedNotification:r}=_;r&&N.setTimeout((()=>r(e,t)))}const $={closed:!0,next:E,error:function(e){throw e},complete:E},q="function"==typeof Symbol&&Symbol.observable||"@@observable";function I(e){return e}class R{constructor(e){e&&(this._subscribe=e)}lift(e){const t=new R;return t.source=this,t.operator=e,t}subscribe(e,t,r){const n=(o=e)&&o instanceof M||function(e){return e&&g(e.next)&&g(e.error)&&g(e.complete)}(o)&&x(o)?e:new j(e,t,r);var o;return T((()=>{const{operator:e,source:t}=this;n.add(e?e.call(n,t):t?this._subscribe(n):this._trySubscribe(n))})),n}_trySubscribe(e){try{return this._subscribe(e)}catch(t){e.error(t)}}forEach(e,t){return new(t=B(t))(((t,r)=>{const n=new j({next:t=>{try{e(t)}catch(e){r(e),n.unsubscribe()}},error:r,complete:t});this.subscribe(n)}))}_subscribe(e){var t;return null===(t=this.source)||void 0===t?void 0:t.subscribe(e)}[q](){return this}pipe(...e){return(0===(t=e).length?I:1===t.length?t[0]:function(e){return t.reduce(((e,t)=>t(e)),e)})(this);var t}toPromise(e){return new(e=B(e))(((e,t)=>{let r;this.subscribe((e=>r=e),(e=>t(e)),(()=>e(r)))}))}}function B(e){var t;return null!==(t=null!=e?e:_.Promise)&&void 0!==t?t:Promise}R.create=e=>new R(e);const J=v((e=>function(){e(this),this.name="ObjectUnsubscribedError",this.message="object unsubscribed"}));class W extends R{constructor(){super(),this.closed=!1,this.currentObservers=null,this.observers=[],this.isStopped=!1,this.hasError=!1,this.thrownError=null}lift(e){const t=new F(this,this);return t.operator=e,t}_throwIfClosed(){if(this.closed)throw new J}next(e){T((()=>{if(this._throwIfClosed(),!this.isStopped){this.currentObservers||(this.currentObservers=Array.from(this.observers));for(const t of this.currentObservers)t.next(e)}}))}error(e){T((()=>{if(this._throwIfClosed(),!this.isStopped){this.hasError=this.isStopped=!0,this.thrownError=e;const{observers:t}=this;for(;t.length;)t.shift().error(e)}}))}complete(){T((()=>{if(this._throwIfClosed(),!this.isStopped){this.isStopped=!0;const{observers:e}=this;for(;e.length;)e.shift().complete()}}))}unsubscribe(){this.isStopped=this.closed=!0,this.observers=this.currentObservers=null}get observed(){var e;return(null===(e=this.observers)||void 0===e?void 0:e.length)>0}_trySubscribe(e){return this._throwIfClosed(),super._trySubscribe(e)}_subscribe(e){return this._throwIfClosed(),this._checkFinalizedStatuses(e),this._innerSubscribe(e)}_innerSubscribe(e){const{hasError:t,isStopped:r,observers:n}=this;return t||r?S:(this.currentObservers=null,n.push(e),new w((()=>{this.currentObservers=null,y(n,e)})))}_checkFinalizedStatuses(e){const{hasError:t,thrownError:r,isStopped:n}=this;t?e.error(r):n&&e.complete()}asObservable(){const e=new R;return e.source=this,e}}W.create=(e,t)=>new F(e,t);class F extends W{constructor(e,t){super(),this.destination=e,this.source=t}next(e){var t,r;null===(r=null===(t=this.destination)||void 0===t?void 0:t.next)||void 0===r||r.call(t,e)}error(e){var t,r;null===(r=null===(t=this.destination)||void 0===t?void 0:t.error)||void 0===r||r.call(t,e)}complete(){var e,t;null===(t=null===(e=this.destination)||void 0===e?void 0:e.complete)||void 0===t||t.call(e)}_subscribe(e){var t,r;return null!==(r=null===(t=this.source)||void 0===t?void 0:t.subscribe(e))&&void 0!==r?r:S}}var U=.2126,K=.7152,Y=.0722,V=1/12.92;function Z(e){return Math.pow((e+.055)/1.055,2.4)}function G(e){var t=e[0]/255,r=e[1]/255,n=e[2]/255,o=t<=.03928?t*V:Z(t),s=r<=.03928?r*V:Z(r),i=n<=.03928?n*V:Z(n);return o*U+s*K+i*Y}function Q(e){var t=255;8===(e=e.replace(/^#/,"")).length&&(t=parseInt(e.slice(6,8),16),e=e.substring(0,6)),4===e.length&&(t=parseInt(e.slice(3,4).repeat(2),16),e=e.substring(0,3)),3===e.length&&(e=e[0]+e[0]+e[1]+e[1]+e[2]+e[2]);var r=parseInt(e,16);return[r>>16,r>>8&255,255&r,t]}function X(e,t){return function(e,t){return function(e,t){return(Math.max(e,t)+.05)/(Math.min(e,t)+.05)}(G(e),G(t))}(Q(e),Q(t))}const ee=/\[object Object\]/,te=(e,t)=>{"string"==typeof e&&ee.test(e)||t()},re=(e,t)=>{"string"==typeof e&&""===e||t()},ne=(e,t)=>{(0,s.d)()&&(s.L.debug([e,t]),s.L.debug("↑ We propagate the (submit) event to this target.")),Object.defineProperty(e,"target",{value:t,writable:!1})},oe=(e,t,r,n={})=>{var o,s;void 0===e.nextHooks&&(e.nextHooks=new Map),void 0===e.nextState&&(e.nextState=new Map),e.nextHooks.get(t)instanceof Map==0&&e.nextHooks.set(t,new Map),"function"==typeof n.afterPatch&&(null===(o=e.nextHooks.get(t))||void 0===o||o.set("afterPatch",n.afterPatch)),"function"==typeof n.beforePatch&&(null===(s=e.nextHooks.get(t))||void 0===s||s.set("beforePatch",n.beforePatch)),e.nextState.set(t,r),(e=>{var t,r,n;null===(t=e.nextHooks)||void 0===t||t.forEach(((t,r)=>{var n;const o=t.get("beforePatch");"function"==typeof o&&o(null===(n=e.nextState)||void 0===n?void 0:n.get(r),e.nextState,e,r)})),(null===(r=e.nextState)||void 0===r?void 0:r.size)>0&&(e.state=Object.assign(Object.assign({},e.state),Object.fromEntries(e.nextState)),delete e.nextState,null===(n=e.nextHooks)||void 0===n||n.forEach(((t,r)=>{const n=t.get("afterPatch");"function"==typeof n&&n(e.state[r],e.state,e,r)}))),delete e.nextHooks})(e)},se=(e,t,r,n)=>{(0,o.d)(`[${e.constructor.name}] Der Property-Wert (${r}) für '${t}' ist nicht valide. Folgende Werte sind erlaubt: ${Array.from(n).join(", ")}`)};function ie(e,t,r,n,o,s={}){r(o)?oe(e,t,o,s.hooks):void 0===o&&!0!==s.required&&r(s.defaultValue)?oe(e,t,s.defaultValue,s.hooks):(s.required||n.add(null),se(e,t,o,n))}const ce=(e,t,r,n)=>{ie(e,t,(e=>"boolean"==typeof e),new Set(["Boolean {true, false}"]),r,n)},le=(e,t,r,n={})=>{const o="number"==typeof n.minLength?null==n?void 0:n.minLength:0;ie(e,t,(e=>"string"==typeof e&&e.length>=o&&(void 0===(null==n?void 0:n.maxLength)||e.length<=n.maxLength)),new Set(["String"]),r,n)},ae=(e,t,r,n)=>{ie(e,t,(e=>"number"==typeof e&&(void 0===(null==n?void 0:n.min)||"number"==typeof(null==n?void 0:n.min)&&e>=n.min)&&(void 0===(null==n?void 0:n.max)||"number"==typeof(null==n?void 0:n.max)&&e<=n.max)),new Set(["Number"]),r,n)},ue=(e,t,r,n,o=(e=>e==e),i={})=>{re(n,(()=>{te(n,(()=>{void 0===n&&(n=[]);try{try{n=ve(n)}catch(e){}if(Array.isArray(n)){const c=n.find((e=>!r(e)));void 0===c&&o(n)?oe(e,t,n,i.hooks):te(c,(()=>{throw s.L.debug(c),new Error("↑ Das Schema für das Property (_options) ist nicht valide. Der Wert wird nicht geändert.")}))}else te(n,(()=>{throw s.L.debug(n),new Error("↑ Das Schema für das Property (_options) ist nicht valide. Der Wert wird nicht geändert.")}))}catch(e){s.L.debug(e)}}))}))},de=/^(true|false)$/,he=/^-?(0|[1-9]\d*)$/,fe=/^-?(0.|[1-9]\d*.)\d*[1-9]$/,pe=e=>{const t=typeof e,r=`${e}`;if("string"==typeof e)if(de.test(e))e="true"===e;else if(he.test(e))e=parseInt(e);else if(fe.test(e))e=parseFloat(e);else if(ge.test(e))try{e=ve(e)}catch(e){}return t!==typeof e&&(0,o.d)(`You have used a stringified property value (${r} to ${JSON.stringify(e)}) which type switched from ${t} to ${typeof e}!`),e},be=e=>{try{return JSON.stringify(e).replace(/"/g,"'")}catch(t){throw s.L.warn(["stringifyJson",e]),s.L.error("↑ Das JSON konnte nicht in einen String umgewandelt werden. Es wird ein stringifizierbares JSON erwartet."),new Error}},ge=/^[{[]/,ve=e=>{if("string"==typeof e)try{return JSON.parse(e)}catch(t){if(ge.test(e))try{return JSON.parse(e.replace(/'/g,'"'))}catch(t){s.L.warn(["parseJson",e]),s.L.error("↑ Der JSON-String konnte nicht geparsed werden. Achten Sie darauf, dass einfache Anführungszeichen im Text maskiert werden (&#8216;).")}}throw new Error},me=e=>"boolean"==typeof e?!0===e?"true":"false":void 0,ye=e=>"string"==typeof e?e:me(e),we=(e,t)=>l(e,t||(0,s.a)()),Se=(e,t)=>c(e,t||(0,s.a)());let xe=null;const ke=()=>(xe=xe||{backgroundColor:"#00000000",color:"#00000000",domNode:(0,s.a)().body,level:"Fail",score:1},xe),_e=/(\d+, ){3}0\)/,Ne=(e,t=ke())=>{const r=getComputedStyle(e),n=_e.test(r.backgroundColor)?t.backgroundColor:b.hex(r.backgroundColor),o=_e.test(r.color)?t.color:b.hex(r.color),i=X(n,o),c={backgroundColor:n,color:o,domNode:e,level:(l=i,l>=7?"AAA":l>=4.5?"AA":l>=3?"AA Large":"Fail"),score:i};var l;return i<4.5&&s.L.error(["Color-Contrast-Error",{backgroundColor:c.backgroundColor,color:c.color,level:c.level,score:c.score},c.domNode]),c},Ee=(e,t=ke())=>{t.domNode instanceof HTMLElement&&(t=Ne(t.domNode,t));const r=t.domNode.querySelector(e);if(null===r){const r=t.domNode.querySelectorAll('[class="hydrated"]');for(let n=0;n<r.length&&(t.domNode=r[n],null===(t=Ee(e,t)).domNode);n++);return t}return Ne(r,t)},Ae=(e,t=window)=>{e instanceof HTMLElement?(t.scrollTo({behavior:"smooth",top:e.getBoundingClientRect().top+(0,s.b)().pageYOffset-50}),e.focus()):(0,o.d)("Das HTMLElement ist nicht valide, zu dem gescrollt werden soll.")},Le=(e,t)=>{if((e instanceof Document||e instanceof HTMLElement||e instanceof ShadowRoot)&&"string"==typeof t){(0,o.d)("Bei der Methode querySelectorAll wurden die Parameter document, selector in selector, document getauscht, da der Parameter selector nicht, allerdings der Parameter document optional sein kann.");const r=`${t}`;t=e,e=r}if("string"==typeof e){const r=we(e,t);r instanceof HTMLElement?Ae(r):(0,o.d)(`Es konnte kein HTMLElement mit dem Selector (${e}) gefunden werden, zu dem gescrollt werden soll.`)}else(0,o.d)("Der Selector ist nicht valide, zu dem gescrollt werden soll.")};class Oe{static queryHtmlElementColors(e,t,r=!1,n=!0){let o=null;if(!0===r||!1===Oe.executionLock)if(!1===r&&(Oe.cache.clear(),Oe.cache.set(t.domNode,t),Oe.executionLock=!0,!0===n&&s.L.debug("[KoliBriUtils] Color contrast analysis started...")),e===t.domNode)o=t;else{const r=new Set;if(t.domNode.shadowRoot){const e=t.domNode.shadowRoot.children;for(let t=0;t<e.length;t++)r.add(e[t])}const n=t.domNode;if("function"==typeof n.assignedNodes){const e=n.assignedNodes();for(let t=0;t<e.length;t++)e[t]instanceof HTMLElement&&r.add(e[t])}const s=t.domNode.children;for(let e=0;e<s.length;e++)r.add(s[e]);const i=Array.from(r);for(let r=0;r<i.length;r++){let n=Oe.cache.get(i[r]);void 0===n&&(n=Ne(i[r],t)),Oe.cache.set(i[r],n);const s=Oe.queryHtmlElementColors(e,n,!0,!1);if(null!==s){o=s;break}}}else s.L.debug("[KoliBriUtils] Call aborted because a color contrast analysis is currently being executed.");return!1===r&&(!0===n&&s.L.debug(`[KoliBriUtils] Color contrast analysis finished (${Oe.cache.size} DOM elements are analysed).`),Oe.executionLock=!1,Oe.cache.clear()),o}}Oe.executionLock=!1,Oe.cache=new Map;const Te=new W;class Me{}Me.ariaCurrentSubject=Te,Me.patchTheme=n.b,Me.patchThemeTag=n.A,Me.querySelector=we,Me.querySelectorAll=Se,Me.scrollByHTMLElement=Ae,Me.scrollBySelector=Le,Me.stringifyJson=be}}]);