@public-ui/sample-react 1.7.25 → 1.7.26-rc.0
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.
- package/dist/1069.js +1 -1
- package/dist/1085.js +1 -1
- package/dist/1184.js +1 -1
- package/dist/1222.js +1 -1
- package/dist/1278.js +1 -1
- package/dist/1325.js +1 -1
- package/dist/1333.js +1 -1
- package/dist/1661.js +1 -1
- package/dist/1703.js +1 -1
- package/dist/1711.js +1 -1
- package/dist/1792.js +1 -1
- package/dist/1793.js +1 -1
- package/dist/187.js +1 -0
- package/dist/1878.js +1 -1
- package/dist/{2214.js → 1941.js} +2 -2
- package/dist/1957.js +1 -1
- package/dist/2195.js +1 -1
- package/dist/2305.js +1 -1
- package/dist/2538.js +1 -1
- package/dist/279.js +1 -1
- package/dist/2830.js +1 -1
- package/dist/3128.js +2 -0
- package/dist/3180.js +1 -1
- package/dist/3332.js +1 -1
- package/dist/3344.js +1 -1
- package/dist/3596.js +1 -1
- package/dist/3714.js +1 -1
- package/dist/3974.js +1 -1
- package/dist/4014.js +1 -1
- package/dist/4102.js +1 -1
- package/dist/4218.js +1 -1
- package/dist/4404.js +1 -1
- package/dist/4941.js +1 -1
- package/dist/500.js +1 -1
- package/dist/5139.js +1 -1
- package/dist/5164.js +1 -1
- package/dist/5484.js +1 -1
- package/dist/5540.js +1 -1
- package/dist/5756.js +1 -1
- package/dist/6682.js +1 -1
- package/dist/6781.js +1 -1
- package/dist/7245.js +1 -1
- package/dist/7263.js +1 -1
- package/dist/7512.js +1 -1
- package/dist/7856.js +1 -1
- package/dist/8002.js +1 -1
- package/dist/8049.js +1 -1
- package/dist/8189.js +1 -1
- package/dist/8264.js +1 -1
- package/dist/8389.js +1 -1
- package/dist/8515.js +1 -1
- package/dist/8557.js +1 -1
- package/dist/8588.js +1 -1
- package/dist/8724.js +1 -1
- package/dist/882.js +1 -1
- package/dist/895.js +1 -1
- package/dist/8993.js +1 -1
- package/dist/902.js +1 -1
- package/dist/9175.js +1 -1
- package/dist/9202.js +1 -1
- package/dist/9558.js +1 -1
- package/dist/9567.js +1 -1
- package/dist/9654.js +2 -0
- package/dist/9833.js +1 -1
- package/dist/9961.js +1 -1
- package/dist/9962.js +1 -1
- package/dist/index.html +2 -2
- package/dist/main.css +1 -1
- package/dist/main.js +1 -1
- package/package.json +8 -4
- package/public/index.html +2 -2
- package/src/components/SampleDescription.tsx +16 -9
- package/src/components/Sidebar.tsx +4 -4
- package/src/components/abbr/basic.tsx +5 -0
- package/src/components/accordion/basic.tsx +21 -11
- package/src/components/accordion/headlines.tsx +26 -20
- package/src/components/accordion/routes.ts +0 -5
- package/src/components/alert/basic.tsx +15 -1
- package/src/components/alert/card-msg.tsx +15 -6
- package/src/components/alert/html.tsx +7 -3
- package/src/components/avatar/basic.tsx +13 -6
- package/src/components/badge/basic.tsx +14 -7
- package/src/components/badge/button.tsx +7 -0
- package/src/components/breadcrumb/basic.tsx +53 -46
- package/src/components/button/basic.tsx +13 -2
- package/src/components/button/icons.tsx +26 -19
- package/src/components/button/routes.ts +0 -3
- package/src/components/button/width.tsx +22 -15
- package/src/components/button-group/basic.tsx +18 -7
- package/src/components/button-link/basic.tsx +26 -16
- package/src/components/button-link/icons.tsx +37 -30
- package/src/components/button-link/image.tsx +14 -7
- package/src/components/card/basic.tsx +12 -5
- package/src/components/card/routes.ts +0 -9
- package/src/components/details/basic.tsx +21 -12
- package/src/components/heading/badged.tsx +28 -20
- package/src/components/heading/basic.tsx +14 -8
- package/src/components/heading/paragraph.tsx +44 -38
- package/src/components/icon/basic.tsx +16 -10
- package/src/components/image/basic.tsx +9 -1
- package/src/components/indented-text/basic.tsx +25 -17
- package/src/components/input-checkbox/basic.tsx +9 -1
- package/src/components/input-checkbox/button.tsx +9 -1
- package/src/components/input-checkbox/switch.tsx +9 -1
- package/src/components/input-color/basic.tsx +9 -1
- package/src/components/input-date/basic.tsx +9 -1
- package/src/components/input-email/basic.tsx +9 -1
- package/src/components/input-file/basic.tsx +9 -1
- package/src/components/input-number/basic.tsx +13 -1
- package/src/components/input-password/basic.tsx +9 -1
- package/src/components/input-password/show-password.tsx +26 -19
- package/src/components/input-radio/basic.tsx +9 -1
- package/src/components/input-radio/horizontal.tsx +5 -5
- package/src/components/input-radio/routes.ts +0 -3
- package/src/components/input-range/basic.tsx +12 -1
- package/src/components/input-text/basic.tsx +9 -1
- package/src/components/input-text/focus.tsx +14 -8
- package/src/components/input-text/hide-errors.tsx +4 -1
- package/src/components/input-text/routes.ts +0 -2
- package/src/components/kolibri/basic.tsx +5 -0
- package/src/components/link/basic.tsx +25 -17
- package/src/components/link/icons.tsx +40 -34
- package/src/components/link/image.tsx +18 -12
- package/src/components/link/target.tsx +16 -8
- package/src/components/link-button/basic.tsx +14 -8
- package/src/components/link-group/basic.tsx +13 -2
- package/src/components/link-group/horizontal.tsx +13 -2
- package/src/components/logo/basic.tsx +13 -2
- package/src/components/modal/basic.tsx +9 -2
- package/src/components/nav/aria-current.tsx +24 -15
- package/src/components/nav/basic.tsx +64 -55
- package/src/components/nav/horizontal.tsx +58 -52
- package/src/components/nav/routes.ts +0 -3
- package/src/components/pagination/basic.tsx +15 -6
- package/src/components/progress/basic.tsx +10 -4
- package/src/components/quote/basic.tsx +7 -1
- package/src/components/quote/block.tsx +12 -6
- package/src/components/select/basic.tsx +9 -1
- package/src/components/skip-nav/basic.tsx +7 -11
- package/src/components/spin/basic.tsx +10 -1
- package/src/components/spin/custom.tsx +13 -3
- package/src/components/spin/cycle.tsx +10 -1
- package/src/components/split-button/basic.tsx +9 -2
- package/src/components/table/column-alignment.tsx +4 -0
- package/src/components/table/horizontal-scrollbar.tsx +7 -0
- package/src/components/table/render-cell.tsx +9 -1
- package/src/components/table/routes.ts +0 -3
- package/src/components/table/sort-date.tsx +9 -1
- package/src/components/table/with-pagination.tsx +1 -4
- package/src/components/tabs/basic.tsx +4 -0
- package/src/components/tabs/icons-only.tsx +12 -6
- package/src/components/textarea/adjust-height.tsx +12 -8
- package/src/components/textarea/basic.tsx +10 -1
- package/src/components/textarea/counter.tsx +10 -1
- package/src/components/textarea/resize.tsx +15 -6
- package/src/components/textarea/routes.ts +0 -9
- package/src/components/textarea/rows.tsx +12 -3
- package/src/components/toast/basic.tsx +17 -10
- package/src/components/toast-legacy/basic.tsx +17 -8
- package/src/components/version/basic.tsx +10 -1
- package/src/components/version/context.tsx +12 -5
- package/src/react.main.tsx +1 -1
- package/src/scenarios/appointment-form/AppointmentForm.tsx +53 -43
- package/src/scenarios/custom-tooltip-width.tsx +10 -1
- package/src/scenarios/static-form.tsx +1 -1
- package/src/shares/constants.ts +1 -0
- package/dist/2328.js +0 -1
- package/dist/3454.js +0 -2
- package/dist/4689.js +0 -2
- package/dist/9192.js +0 -2
- package/dist/9192.js.LICENSE.txt +0 -3
- package/src/components/accordion/header.tsx +0 -17
- package/src/components/accordion/list.tsx +0 -32
- package/src/components/button/hide-label.tsx +0 -31
- package/src/components/card/confirm.tsx +0 -19
- package/src/components/card/flex.tsx +0 -44
- package/src/components/card/selection.tsx +0 -70
- package/src/components/input-radio/select.tsx +0 -18
- package/src/components/input-text/blur.tsx +0 -14
- package/src/components/nav/active.tsx +0 -89
- package/src/components/table/badge-size.tsx +0 -51
- package/src/components/textarea/disabled.tsx +0 -10
- package/src/components/textarea/placeholder.tsx +0 -10
- package/src/components/textarea/readonly.tsx +0 -10
- /package/dist/{2214.js.LICENSE.txt → 1941.js.LICENSE.txt} +0 -0
- /package/dist/{3454.js.LICENSE.txt → 3128.js.LICENSE.txt} +0 -0
- /package/dist/{4689.js.LICENSE.txt → 9654.js.LICENSE.txt} +0 -0
|
@@ -6,6 +6,7 @@ import { createReactRenderElement, KolButton, KolInputText, KolTable } from '@pu
|
|
|
6
6
|
import { getRoot } from '../../shares/react-roots';
|
|
7
7
|
import type { KoliBriTableHeaders } from '@public-ui/components';
|
|
8
8
|
import { DATE_FORMATTER } from './formatter';
|
|
9
|
+
import { SampleDescription } from '../SampleDescription';
|
|
9
10
|
|
|
10
11
|
type Data = {
|
|
11
12
|
order: number;
|
|
@@ -96,4 +97,11 @@ const HEADERS: KoliBriTableHeaders = {
|
|
|
96
97
|
],
|
|
97
98
|
};
|
|
98
99
|
|
|
99
|
-
export const TableRenderCell: FC = () =>
|
|
100
|
+
export const TableRenderCell: FC = () => (
|
|
101
|
+
<>
|
|
102
|
+
<SampleDescription>
|
|
103
|
+
<p>This sample shows KolTable using React render functions for the cell contents.</p>
|
|
104
|
+
</SampleDescription>
|
|
105
|
+
<KolTable _label="Sort by date column" _data={DATA} _headers={HEADERS} className="block min-w-75em" />
|
|
106
|
+
</>
|
|
107
|
+
);
|
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
import { Routes } from '../../shares/types';
|
|
2
|
-
|
|
3
|
-
import { TableBadgeSize } from './badge-size';
|
|
4
2
|
import { TableRenderCell } from './render-cell';
|
|
5
3
|
import { TableSortData } from './sort-date';
|
|
6
4
|
import { TableWithPagination } from './with-pagination';
|
|
@@ -9,7 +7,6 @@ import { TableHorizontalScrollbar } from './horizontal-scrollbar';
|
|
|
9
7
|
|
|
10
8
|
export const TABLE_ROUTES: Routes = {
|
|
11
9
|
table: {
|
|
12
|
-
'badge-size': TableBadgeSize,
|
|
13
10
|
'column-alignment': TableColumnAlignment,
|
|
14
11
|
'horizontal-scrollbar': TableHorizontalScrollbar,
|
|
15
12
|
'render-cell': TableRenderCell,
|
|
@@ -3,6 +3,7 @@ import React, { FC } from 'react';
|
|
|
3
3
|
import { KolTable } from '@public-ui/react';
|
|
4
4
|
import { KoliBriTableHeaders } from '@public-ui/components';
|
|
5
5
|
import { DATA, Data } from './test-data';
|
|
6
|
+
import { SampleDescription } from '../SampleDescription';
|
|
6
7
|
|
|
7
8
|
const DATE_FORMATTER = Intl.DateTimeFormat('de-DE', {
|
|
8
9
|
day: '2-digit',
|
|
@@ -30,4 +31,11 @@ const HEADERS: KoliBriTableHeaders = {
|
|
|
30
31
|
],
|
|
31
32
|
};
|
|
32
33
|
|
|
33
|
-
export const TableSortData: FC = () =>
|
|
34
|
+
export const TableSortData: FC = () => (
|
|
35
|
+
<>
|
|
36
|
+
<SampleDescription>
|
|
37
|
+
<p>This sample shows KolTable with sortable columns. The sort-order can be changed by clicking the "date" header column.</p>
|
|
38
|
+
</SampleDescription>
|
|
39
|
+
<KolTable _caption="Sort a date column" _data={DATA} _headers={HEADERS} className="block" />
|
|
40
|
+
</>
|
|
41
|
+
);
|
|
@@ -22,10 +22,7 @@ const PAGINATION: KoliBriTablePaginationProps = { _page: 2 };
|
|
|
22
22
|
export const TableWithPagination: FC = () => (
|
|
23
23
|
<>
|
|
24
24
|
<SampleDescription>
|
|
25
|
-
<p>
|
|
26
|
-
Durch das Navigieren der Seitenzahlen unten kann die Tabelle umgeblättert werden. Stattdessen kann auch die komplette Tabelle mit Änderung der Einträge
|
|
27
|
-
pro Seite angezeigt werden.
|
|
28
|
-
</p>
|
|
25
|
+
<p>This sample shows how KolTable can be navigated using a pagination.</p>
|
|
29
26
|
</SampleDescription>
|
|
30
27
|
<div>
|
|
31
28
|
<KolTable _label="Tabellenbeschreibung" _data={DATA} _headers={HEADERS} _pagination={PAGINATION}></KolTable>
|
|
@@ -2,6 +2,7 @@ import type { FC } from 'react';
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
|
|
4
4
|
import { KolTabs } from '@public-ui/react';
|
|
5
|
+
import { SampleDescription } from '../SampleDescription';
|
|
5
6
|
|
|
6
7
|
const tabs = [
|
|
7
8
|
{
|
|
@@ -30,6 +31,9 @@ const tabsWithoutIcons = tabs.map((tab) => ({
|
|
|
30
31
|
|
|
31
32
|
export const TabsBasic: FC = () => (
|
|
32
33
|
<>
|
|
34
|
+
<SampleDescription>
|
|
35
|
+
<p>KolTabs renders tab captions and their associated content. This sample shows tab captions with and without icons and disabled tabs.</p>
|
|
36
|
+
</SampleDescription>
|
|
33
37
|
<KolTabs _tabs={tabsWithoutIcons} _label="Regular tabs">
|
|
34
38
|
<div slot="tab-0">Inhalte von Tab 1</div>
|
|
35
39
|
<div slot="tab-1">Inhalte von Tab 2</div>
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React, { FC } from 'react';
|
|
2
2
|
import { KolTabs } from '@public-ui/react';
|
|
3
|
+
import { SampleDescription } from '../SampleDescription';
|
|
3
4
|
|
|
4
5
|
const tabs = [
|
|
5
6
|
{
|
|
@@ -25,10 +26,15 @@ const tabs = [
|
|
|
25
26
|
},
|
|
26
27
|
];
|
|
27
28
|
export const TabsIconsOnly: FC = () => (
|
|
28
|
-
|
|
29
|
-
<
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
<
|
|
33
|
-
|
|
29
|
+
<>
|
|
30
|
+
<SampleDescription>
|
|
31
|
+
<p>This sample shows KolTabs with hidden labels.</p>
|
|
32
|
+
</SampleDescription>
|
|
33
|
+
<KolTabs _tabs={tabs}>
|
|
34
|
+
<div slot="tab-0">Inhalte von Tab 1</div>
|
|
35
|
+
<div slot="tab-1">Inhalte von Tab 2</div>
|
|
36
|
+
<div slot="tab-2">Inhalte von Tab 3</div>
|
|
37
|
+
<div slot="tab-3">Inhalte von Tab 4</div>
|
|
38
|
+
</KolTabs>
|
|
39
|
+
</>
|
|
34
40
|
);
|
|
@@ -2,6 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import { KolForm, KolTextarea } from '@public-ui/react';
|
|
3
3
|
|
|
4
4
|
import { FC } from 'react';
|
|
5
|
+
import { SampleDescription } from '../SampleDescription';
|
|
5
6
|
|
|
6
7
|
const VALUE = `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
|
|
7
8
|
magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
|
|
@@ -11,12 +12,15 @@ et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea t
|
|
|
11
12
|
sit amet.`;
|
|
12
13
|
|
|
13
14
|
export const TextareaAdjustHeight: FC = () => (
|
|
14
|
-
|
|
15
|
-
<
|
|
16
|
-
<
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
15
|
+
<>
|
|
16
|
+
<SampleDescription>
|
|
17
|
+
<p>
|
|
18
|
+
This sample demonstrates the <code>_adjustHeight</code>-property of KolTextarea. The textarea automatically grows with its content.
|
|
19
|
+
</p>
|
|
20
|
+
</SampleDescription>
|
|
21
|
+
|
|
22
|
+
<KolForm>
|
|
23
|
+
<KolTextarea _adjustHeight={true} _value={VALUE} _label="Text input (auto grow)" />
|
|
24
|
+
</KolForm>
|
|
25
|
+
</>
|
|
22
26
|
);
|
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
import React, { FC } from 'react';
|
|
2
2
|
import { FormWrap } from '../FormWrap';
|
|
3
3
|
import { TextareaVariants } from './partials/variants';
|
|
4
|
+
import { SampleDescription } from '../SampleDescription';
|
|
4
5
|
|
|
5
|
-
export const TextareaBasic: FC = () =>
|
|
6
|
+
export const TextareaBasic: FC = () => (
|
|
7
|
+
<>
|
|
8
|
+
<SampleDescription>
|
|
9
|
+
<p>KolTextarea renders a text field. The sample shows KolTextarea in a form context with different variations and states.</p>
|
|
10
|
+
</SampleDescription>
|
|
11
|
+
|
|
12
|
+
<FormWrap RefComponent={TextareaVariants} />
|
|
13
|
+
</>
|
|
14
|
+
);
|
|
@@ -1,6 +1,15 @@
|
|
|
1
1
|
import React, { FC } from 'react';
|
|
2
2
|
import { KolTextarea } from '@public-ui/react';
|
|
3
|
+
import { SampleDescription } from '../SampleDescription';
|
|
3
4
|
|
|
4
5
|
export const TextareaCounter: FC = () => (
|
|
5
|
-
|
|
6
|
+
<>
|
|
7
|
+
<SampleDescription>
|
|
8
|
+
<p>
|
|
9
|
+
This sample demonstrates the <code>_hasCounter</code>-property of KolTextarea. It shows how many characters have been entered.
|
|
10
|
+
</p>
|
|
11
|
+
</SampleDescription>
|
|
12
|
+
|
|
13
|
+
<KolTextarea _label="Textara with counter" _hasCounter={true} />
|
|
14
|
+
</>
|
|
6
15
|
);
|
|
@@ -2,12 +2,21 @@ import React from 'react';
|
|
|
2
2
|
import { KolForm, KolTextarea } from '@public-ui/react';
|
|
3
3
|
|
|
4
4
|
import { FC } from 'react';
|
|
5
|
+
import { SampleDescription } from '../SampleDescription';
|
|
5
6
|
|
|
6
7
|
export const TextareaResize: FC = () => (
|
|
7
|
-
|
|
8
|
-
<
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
8
|
+
<>
|
|
9
|
+
<SampleDescription>
|
|
10
|
+
<p>
|
|
11
|
+
This sample demonstrates the <code>_resize</code>-property of KolTextarea. The sample textarea can (only) be resized in the given direction.
|
|
12
|
+
</p>
|
|
13
|
+
</SampleDescription>
|
|
14
|
+
|
|
15
|
+
<KolForm className="grid gap-4">
|
|
16
|
+
<KolTextarea _resize="both" _label="Text input (both)" />
|
|
17
|
+
<KolTextarea _resize="vertical" _label="Text input (vertical)" className="mt" />
|
|
18
|
+
<KolTextarea _resize="horizontal" _label="Text input (horizontal)" className="mt" />
|
|
19
|
+
<KolTextarea _resize="none" _label="Text input (none)" className="mt" />
|
|
20
|
+
</KolForm>
|
|
21
|
+
</>
|
|
13
22
|
);
|
|
@@ -4,12 +4,6 @@ import { TextareaBasic } from './basic';
|
|
|
4
4
|
|
|
5
5
|
import { TextareaAdjustHeight } from './adjust-height';
|
|
6
6
|
|
|
7
|
-
import { TextareaDisabled } from './disabled';
|
|
8
|
-
|
|
9
|
-
import { TextareaPlaceholder } from './placeholder';
|
|
10
|
-
|
|
11
|
-
import { TextareaReadOnly } from './readonly';
|
|
12
|
-
|
|
13
7
|
import { TextareaResize } from './resize';
|
|
14
8
|
|
|
15
9
|
import { TextareaRows } from './rows';
|
|
@@ -19,9 +13,6 @@ export const TEXTAREA_ROUTES: Routes = {
|
|
|
19
13
|
textarea: {
|
|
20
14
|
basic: TextareaBasic,
|
|
21
15
|
'adjust-height': TextareaAdjustHeight,
|
|
22
|
-
disabled: TextareaDisabled,
|
|
23
|
-
placeholder: TextareaPlaceholder,
|
|
24
|
-
readonly: TextareaReadOnly,
|
|
25
16
|
resize: TextareaResize,
|
|
26
17
|
rows: TextareaRows,
|
|
27
18
|
'with-counter': TextareaCounter,
|
|
@@ -2,9 +2,18 @@ import { KolForm, KolTextarea } from '@public-ui/react';
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
|
|
4
4
|
import { FC } from 'react';
|
|
5
|
+
import { SampleDescription } from '../SampleDescription';
|
|
5
6
|
|
|
6
7
|
export const TextareaRows: FC = () => (
|
|
7
|
-
|
|
8
|
-
<
|
|
9
|
-
|
|
8
|
+
<>
|
|
9
|
+
<SampleDescription>
|
|
10
|
+
<p>
|
|
11
|
+
This sample demonstrates the <code>_rows</code>-property of KolTextarea. The sample textarea has a fixed row number of 10.
|
|
12
|
+
</p>
|
|
13
|
+
</SampleDescription>
|
|
14
|
+
|
|
15
|
+
<KolForm>
|
|
16
|
+
<KolTextarea _rows={10} _label="Texteingabe" />
|
|
17
|
+
</KolForm>
|
|
18
|
+
</>
|
|
10
19
|
);
|
|
@@ -2,6 +2,7 @@ import { ToasterService } from '@public-ui/components';
|
|
|
2
2
|
import { KolButton } from '@public-ui/react';
|
|
3
3
|
import React, { FC } from 'react';
|
|
4
4
|
import { getRoot } from '../../shares/react-roots';
|
|
5
|
+
import { SampleDescription } from '../SampleDescription';
|
|
5
6
|
|
|
6
7
|
export const ToastBasic: FC = () => {
|
|
7
8
|
const toaster = ToasterService.getInstance(document);
|
|
@@ -53,15 +54,21 @@ export const ToastBasic: FC = () => {
|
|
|
53
54
|
};
|
|
54
55
|
|
|
55
56
|
return (
|
|
56
|
-
|
|
57
|
-
<
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
<
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
57
|
+
<>
|
|
58
|
+
<SampleDescription>
|
|
59
|
+
<p>This sample demonstrates the toast service with all its options.</p>
|
|
60
|
+
</SampleDescription>
|
|
61
|
+
|
|
62
|
+
<div>
|
|
63
|
+
<KolButton _label="Show simple toast" _on={{ onClick: handleButtonClickSimple }}></KolButton>
|
|
64
|
+
<KolButton _label="Show complex toast" _on={{ onClick: handleButtonClickComplex }}></KolButton>
|
|
65
|
+
<br />
|
|
66
|
+
<br />
|
|
67
|
+
<KolButton _label="Show toast and close after 2 seconds" _on={{ onClick: () => void handleButtonClickOpenAndClose() }}></KolButton>
|
|
68
|
+
<br />
|
|
69
|
+
<br />
|
|
70
|
+
<KolButton _label="Close all toasts" _on={{ onClick: closeAll }}></KolButton>
|
|
71
|
+
</div>
|
|
72
|
+
</>
|
|
66
73
|
);
|
|
67
74
|
};
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { FC } from 'react';
|
|
3
|
-
import { KolButton, KolToast } from '@public-ui/react';
|
|
3
|
+
import { KolBadge, KolButton, KolToast } from '@public-ui/react';
|
|
4
4
|
import { ToasterServiceLegacy } from '@public-ui/components';
|
|
5
|
+
import { SampleDescription } from '../SampleDescription';
|
|
5
6
|
|
|
6
7
|
export const ToastBasic: FC = () => {
|
|
7
8
|
const toaster = ToasterServiceLegacy.getInstance(document);
|
|
@@ -14,13 +15,21 @@ export const ToastBasic: FC = () => {
|
|
|
14
15
|
});
|
|
15
16
|
};
|
|
16
17
|
return (
|
|
17
|
-
|
|
18
|
-
<
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
18
|
+
<>
|
|
19
|
+
<SampleDescription>
|
|
20
|
+
<p>This sample shows the legacy KolToast component.</p>
|
|
21
|
+
<p>
|
|
22
|
+
<KolBadge _label="The component is deprecated and won't be available anymore in KoliBri version 3." _color="#db5461" />
|
|
23
|
+
</p>
|
|
24
|
+
</SampleDescription>
|
|
25
|
+
<div>
|
|
26
|
+
<KolToast _label="Legacy Toast Titel">Toast content</KolToast>
|
|
27
|
+
<KolToast _label="Zweiter Toast mit Schließen-Button" _hasCloser>
|
|
28
|
+
Toast content
|
|
29
|
+
</KolToast>
|
|
22
30
|
|
|
23
|
-
|
|
24
|
-
|
|
31
|
+
<KolButton _label="Weiteren Toast öffnen" _on={{ onClick: handleButtonClick }}></KolButton>
|
|
32
|
+
</div>
|
|
33
|
+
</>
|
|
25
34
|
);
|
|
26
35
|
};
|
|
@@ -2,5 +2,14 @@ import React from 'react';
|
|
|
2
2
|
import { KolVersion } from '@public-ui/react';
|
|
3
3
|
|
|
4
4
|
import { FC } from 'react';
|
|
5
|
+
import { SampleDescription } from '../SampleDescription';
|
|
5
6
|
|
|
6
|
-
export const VersionBasic: FC = () =>
|
|
7
|
+
export const VersionBasic: FC = () => (
|
|
8
|
+
<>
|
|
9
|
+
<SampleDescription>
|
|
10
|
+
<p>KolVersion renders a label showing the given version number.</p>
|
|
11
|
+
</SampleDescription>
|
|
12
|
+
|
|
13
|
+
<KolVersion _label="1.1.1" />
|
|
14
|
+
</>
|
|
15
|
+
);
|
|
@@ -2,11 +2,18 @@ import React from 'react';
|
|
|
2
2
|
import { KolVersion } from '@public-ui/react';
|
|
3
3
|
|
|
4
4
|
import { FC } from 'react';
|
|
5
|
+
import { SampleDescription } from '../SampleDescription';
|
|
5
6
|
|
|
6
7
|
export const VersionContext: FC = () => (
|
|
7
|
-
|
|
8
|
-
<
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
8
|
+
<>
|
|
9
|
+
<SampleDescription>
|
|
10
|
+
<p>This sample shows KolVersion inline with text paragraph content.</p>
|
|
11
|
+
</SampleDescription>
|
|
12
|
+
|
|
13
|
+
<p>
|
|
14
|
+
<KolVersion _label="1.0.0" /> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
|
|
15
|
+
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
|
|
16
|
+
ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
|
|
17
|
+
</p>
|
|
18
|
+
</>
|
|
12
19
|
);
|
package/src/react.main.tsx
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { useEffect, useState, useRef } from 'react';
|
|
2
|
-
import { KolTabs } from '@public-ui/react';
|
|
2
|
+
import { KolLink, KolTabs } from '@public-ui/react';
|
|
3
3
|
import { DistrictForm } from './DistrictForm';
|
|
4
4
|
import { Summary } from './Summary';
|
|
5
5
|
import { PersonalInformationForm } from './PersonalInformationForm';
|
|
@@ -8,6 +8,7 @@ import * as Yup from 'yup';
|
|
|
8
8
|
import { AvailableAppointmentsForm } from './AvailableAppointmentsForm';
|
|
9
9
|
import { Iso8601 } from '@public-ui/components';
|
|
10
10
|
import { checkAppointmentAvailability } from './appointmentService';
|
|
11
|
+
import { SampleDescription } from '../../components/SampleDescription';
|
|
11
12
|
|
|
12
13
|
// export interface FormProps {}
|
|
13
14
|
export interface FormValues {
|
|
@@ -86,47 +87,56 @@ export function AppointmentForm() {
|
|
|
86
87
|
};
|
|
87
88
|
|
|
88
89
|
return (
|
|
89
|
-
|
|
90
|
-
<
|
|
91
|
-
|
|
92
|
-
{
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
{
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
90
|
+
<>
|
|
91
|
+
<SampleDescription>
|
|
92
|
+
<p>
|
|
93
|
+
The Appointment Form is a full form example featuring a large variety of KoliBri form components,{' '}
|
|
94
|
+
<KolLink _label="Formik" _href="https://formik.org/" _target="blank" /> and{' '}
|
|
95
|
+
<KolLink _label="Yup" _href="https://github.com/jquense/yup" _target="blank" />.
|
|
96
|
+
</p>
|
|
97
|
+
</SampleDescription>
|
|
98
|
+
<Formik<FormValues> innerRef={formikRef} initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit}>
|
|
99
|
+
<KolTabs
|
|
100
|
+
_tabs={[
|
|
101
|
+
{
|
|
102
|
+
_label: '1. Einwohnermeldeamt wählen',
|
|
103
|
+
},
|
|
104
|
+
{
|
|
105
|
+
_label: '2. Freie Termine',
|
|
106
|
+
_disabled: activeFormSection < FormSection.AVAILABLE_APPOINTMENTS,
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
_label: '3. Persönliche Daten',
|
|
110
|
+
_disabled: activeFormSection < FormSection.PERSONAL_INFORMATION,
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
_label: 'Zusammenfassung',
|
|
114
|
+
_disabled: activeFormSection < FormSection.SUMMARY,
|
|
115
|
+
},
|
|
116
|
+
]}
|
|
117
|
+
_label="Formular-Navigation"
|
|
118
|
+
_selected={selectedTab}
|
|
119
|
+
_on={{
|
|
120
|
+
onSelect: (_event, selectedTab) => {
|
|
121
|
+
setActiveFormSection(selectedTab);
|
|
122
|
+
formikRef.current?.setErrors({});
|
|
123
|
+
},
|
|
124
|
+
}}
|
|
125
|
+
>
|
|
126
|
+
<div>
|
|
127
|
+
<DistrictForm />
|
|
128
|
+
</div>
|
|
129
|
+
<div>
|
|
130
|
+
<AvailableAppointmentsForm />
|
|
131
|
+
</div>
|
|
132
|
+
<div>
|
|
133
|
+
<PersonalInformationForm />
|
|
134
|
+
</div>
|
|
135
|
+
<div>
|
|
136
|
+
<Summary />
|
|
137
|
+
</div>
|
|
138
|
+
</KolTabs>
|
|
139
|
+
</Formik>
|
|
140
|
+
</>
|
|
131
141
|
);
|
|
132
142
|
}
|
|
@@ -1,6 +1,15 @@
|
|
|
1
1
|
import React, { FC } from 'react';
|
|
2
2
|
import { KolButton } from '@public-ui/react';
|
|
3
|
+
import { SampleDescription } from '../components/SampleDescription';
|
|
3
4
|
|
|
4
5
|
export const CustomTooltipWidth: FC = () => (
|
|
5
|
-
|
|
6
|
+
<>
|
|
7
|
+
<SampleDescription>
|
|
8
|
+
<p>
|
|
9
|
+
This sample demonstrates how a tooltip's width can be adjusted by defining the CSS custom property <code>--kol-tooltip-width</code> on one of the
|
|
10
|
+
parent elements.
|
|
11
|
+
</p>
|
|
12
|
+
</SampleDescription>
|
|
13
|
+
<KolButton _label="Tooltip mit fixer Breite" _hideLabel style={{ '--kol-tooltip-width': '400px' }} _icons="codicon codicon-reactions"></KolButton>
|
|
14
|
+
</>
|
|
6
15
|
);
|
|
@@ -23,7 +23,7 @@ export const StaticForm: FC = () => {
|
|
|
23
23
|
return (
|
|
24
24
|
<>
|
|
25
25
|
<SampleDescription>
|
|
26
|
-
<p>This sample shows how
|
|
26
|
+
<p>This sample shows how KoliBri can be used in a static form context.</p>
|
|
27
27
|
<ol>
|
|
28
28
|
<li>
|
|
29
29
|
First you have to enable the <code>experimental mode</code>:{' '}
|
package/src/shares/constants.ts
CHANGED
package/dist/2328.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[2328],{2328:(e,t,i)=>{i.r(t),i.d(t,{initialize:()=>a});var r=i(7302),l=i(2214);function n(e,t){try{Object.defineProperty((()=>{let e=(0,r.b)().KoliBri;return void 0===e&&(e={},Object.defineProperty((0,r.b)(),"KoliBri",{value:e,writable:!1})),e})(),e,{get:function(){return t}})}catch(t){r.L.debug(`KoliBri property ${e} is already bind.`)}}const o=(e,t)=>r.L.debug(`${e} ${t?"":"not "}activated`),a=()=>{if((0,r.i)(),(0,r.c)()){(0,r.r)(),n("a11yColorContrast",l.q),n("querySelector",l.k),n("querySelectorAll",l.t),n("querySelectorColors",l.u),n("utils",(function(){return l.n})),n("parseJson",l.p),n("stringifyJson",l.v);const e=(0,r.g)().body,t=(0,r.g)().createElement("svg");if(t.setAttribute("aria-label","KoliBri-DevTools"),t.setAttribute("xmlns","http://www.w3.org/2000/svg"),t.setAttribute("role","toolbar"),t.setAttribute("style","position: fixed;color: black;font-size: 200%;bottom: 0.25rem;right: 0.25rem;"),t.innerHTML='<svg\n xmlns="http://www.w3.org/2000/svg"\n width="50"\n height="50"\n viewBox="0 0 600 600"\n>\n <path d="M353 322L213 304V434L353 322Z" fill="#047" />\n <path d="M209 564V304L149 434L209 564Z" fill="#047" />\n <path d="M357 316L417 250L361 210L275 244L357 316Z" fill="#047" />\n <path d="M353 318L35 36L213 300L353 318Z" fill="#047" />\n <path d="M329 218L237 92L250 222L272 241L329 218Z" fill="#047" />\n <path d="M391 286L565 272L421 252L391 286Z" fill="#047" />\n</svg>',(0,r.g)().body.appendChild(t),o("Development mode",(0,r.c)()),o("Experimental mode",(0,r.a)()),o("Color contrast analysis",(0,r.d)()),(0,r.d)()){const t=setTimeout((()=>{clearTimeout(t),setInterval((()=>{l.n.queryHtmlElementColors((0,r.g)().createElement("div"),(0,l.q)(e),!1,!1)}),1e4)}),2500)}}}}}]);
|
package/dist/3454.js
DELETED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
/*! For license information please see 3454.js.LICENSE.txt */
|
|
2
|
-
"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[3454],{3454:(i,e,n)=>{n.r(e),n.d(e,{kol_span:()=>o});var t=n(1418),a=n(173);const o=class{constructor(i){(0,t.r)(this,i),this._hideLabel=!1,this._icon=void 0,this._icons=void 0,this._iconOnly=void 0,this._label=void 0}render(){return(0,t.h)(a.g,{key:"a788b90468806bfe35b375f4945987213af57c7b",_icons:this._icons||this._icon,_hideLabel:this._hideLabel,_label:this._label,class:"kol-span"},(0,t.h)("slot",{key:"81012eadd30eb01ef5f1807237303484ffbb1e34",name:"expert",slot:"expert"}))}};o.style={default:":host{--a11y-min-size:44px;background-color:white;color:black;font-family:Verdana}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role=button],button:not([role=link]),.kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}:host{max-width:100%}*{box-sizing:border-box}.kol-span-wc{display:grid;place-items:center}.kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}.icon-only>.kol-span-wc>span>span{display:none}.hidden{display:none;visibility:hidden}"}}}]);
|
package/dist/4689.js
DELETED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
/*! For license information please see 4689.js.LICENSE.txt */
|
|
2
|
-
"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[4689],{45:(t,e,n)=>{n.d(e,{v:()=>i});var o=n(3134);const i=(t,e)=>{(0,o.v)(t,"_align",e)}},3134:(t,e,n)=>{n.d(e,{v:()=>r});var o=n(2214);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"})}},6133:(t,e,n)=>{n.d(e,{a:()=>yt,b:()=>mt,c:()=>xt,f:()=>gt,o:()=>pt,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,g=Math.round,y=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){const{x:e,y:n,width:o,height:i}=t;return{width:o,height:i,top:n,left:e,right:e+o,bottom:n+i,x:e,y:n}}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),g=k(h),y=c[p?"floating"===m?"reference":"floating":m],x=C(yield r.getClippingRect({element:null==(n=yield null==r.isElement?void 0:r.isElement(y))||n?y:y.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+g.top)/b.y,bottom:(E.bottom-x.bottom+g.bottom)/b.y,left:(x.left-E.left+g.left)/b.x,right:(E.right-x.right+g.right)/b.x}}))}function W(t){return B(t)?(t.nodeName||"").toLowerCase():"#document"}function _(t){var e;return(null==t||null==(e=t.ownerDocument)?void 0:e.defaultView)||window}function V(t){var e;return null==(e=(B(t)?t.ownerDocument:t.document)||window.document)?void 0:e.documentElement}function B(t){return t instanceof Node||t instanceof _(t).Node}function M(t){return t instanceof Element||t instanceof _(t).Element}function j(t){return t instanceof HTMLElement||t instanceof _(t).HTMLElement}function z(t){return"undefined"!=typeof ShadowRoot&&(t instanceof ShadowRoot||t instanceof _(t).ShadowRoot)}function N(t){const{overflow:e,overflowX:n,overflowY:o,display:i}=G(t);return/auto|scroll|overlay|hidden|clip/.test(e+o+n)&&!["inline","contents"].includes(i)}function I(t){return["table","td","th"].includes(W(t))}function q(t){return[":popover-open",":modal"].some((e=>{try{return t.matches(e)}catch(t){return!1}}))}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(W(t))}function G(t){return _(t).getComputedStyle(t)}function J(t){return M(t)?{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}:{scrollLeft:t.pageXOffset,scrollTop:t.pageYOffset}}function K(t){if("html"===W(t))return t;const e=t.assignedSlot||t.parentNode||z(t)&&t.host||V(t);return z(e)?e.host:e}function Q(t){const e=K(t);return $(e)?t.ownerDocument?t.ownerDocument.body:t.body:j(e)&&N(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=_(i);return r?e.concat(l,l.visualViewport||[],N(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=j(t),r=i?t.offsetWidth:n,l=i?t.offsetHeight:o,c=g(n)!==r||g(o)!==l;return c&&(n=r,o=l),{width:n,height:o,$:c}}function tt(t){return M(t)?t:t.contextElement}function et(t){const e=tt(t);if(!j(e))return x(1);const n=e.getBoundingClientRect(),{width:o,height:i,$:r}=Z(e);let l=(r?g(n.width):n.width)/o,c=(r?g(n.height):n.height)/i;return l&&Number.isFinite(l)||(l=1),c&&Number.isFinite(c)||(c=1),{x:l,y:c}}const nt=x(0);function ot(t){const e=_(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?M(o)&&(l=et(o)):l=et(t));const c=function(t,e,n){return void 0===e&&(e=!1),!(!n||e&&n!==_(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=_(r),e=o&&M(o)?_(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=_(i),i=n.frameElement}}return C({width:a,height:u,x:s,y:f})}function rt(t){return it(V(t)).left+J(t).scrollLeft}function lt(t,e,n){let o;if("viewport"===e)o=function(t,e){const n=_(t),o=V(t),i=n.visualViewport;let r=o.clientWidth,l=o.clientHeight,c=0,s=0;if(i){r=i.width,l=i.height;const t=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=V(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+rt(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}}(V(t));else if(M(e))o=function(t,e){const n=it(t,!0,"fixed"===e),o=n.top+t.clientTop,i=n.left+t.clientLeft,r=j(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 ct(t,e){const n=K(t);return!(n===e||!M(n)||$(n))&&("fixed"===G(n).position||ct(n,e))}function st(t,e,n){const o=j(e),i=V(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"!==W(e)||N(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=rt(i));return{x:l.left+c.scrollLeft-s.x,y:l.top+c.scrollTop-s.y,width:l.width,height:l.height}}function ft(t){return"static"===G(t).position}function at(t,e){return j(t)&&"fixed"!==G(t).position?e?e(t):t.offsetParent:null}function ut(t,e){const n=_(t);if(q(t))return n;if(!j(t)){let e=K(t);for(;e&&!$(e);){if(M(e)&&!ft(e))return e;e=K(e)}return n}let o=at(t,e);for(;o&&I(o)&&ft(o);)o=at(o,e);return o&&$(o)&&ft(o)&&!X(o)?n:o||function(t){let e=K(t);for(;j(e)&&!$(e);){if(q(e))return null;if(X(e))return e;e=K(e)}return null}(t)||n}const dt={convertOffsetParentRelativeRectToViewportRelativeRect:function(t){let{elements:e,rect:n,offsetParent:o,strategy:i}=t;const r="fixed"===i,l=V(o),c=!!e&&q(e.floating);if(o===l||c&&r)return n;let s={scrollLeft:0,scrollTop:0},f=x(1);const a=x(0),u=j(o);if((u||!u&&!r)&&(("body"!==W(o)||N(l))&&(s=J(o)),j(o))){const t=it(o);f=et(o),a.x=t.x+o.clientLeft,a.y=t.y+o.clientTop}return{width:n.width*f.x,height:n.height*f.y,x:n.x*f.x-s.scrollLeft*f.x+a.x,y:n.y*f.y-s.scrollTop*f.y+a.y}},getDocumentElement:V,getClippingRect:function(t){let{element:e,boundary:n,rootBoundary:o,strategy:i}=t;const r=[..."clippingAncestors"===n?q(e)?[]:function(t,e){const n=e.get(t);if(n)return n;let o=U(t,[],!1).filter((t=>M(t)&&"body"!==W(t))),i=null;const r="fixed"===G(t).position;let l=r?K(t):t;for(;M(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)||N(l)&&!n&&ct(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=lt(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}),lt(e,l,i));return{width:c.right-c.left,height:c.bottom-c.top,x:c.left,y:c.top}},getOffsetParent:ut,getElementRects:function(t){return m(this,null,(function*(){const e=this.getOffsetParent||ut,n=this.getDimensions,o=yield n(t.floating);return{reference:st(t.reference,yield e(t.floating),t.strategy),floating:{x:0,y:0,width:o.width,height:o.height}}}))},getClientRects:function(t){return Array.from(t.getClientRects())},getDimensions:function(t){const{width:e,height:n}=Z(t);return{width:e,height:n}},getScale:et,isElement:M,isRTL:function(t){return"rtl"===G(t).direction}};function mt(t,e,n,o){void 0===o&&(o={});const{ancestorScroll:i=!0,ancestorResize:r=!0,elementResize:l="function"==typeof ResizeObserver,layoutShift:c="function"==typeof IntersectionObserver,animationFrame:s=!1}=o,f=tt(t),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=V(t);function r(){var t;clearTimeout(n),null==(t=o)||t.disconnect(),o=null}return function l(c,s){void 0===c&&(c=!1),void 0===s&&(s=1),r();const{left:f,top:d,width:m,height:g}=t.getBoundingClientRect();if(c||e(),!m||!g)return;const x={rootMargin:-y(d)+"px "+-y(i.clientWidth-(f+m))+"px "+-y(i.clientHeight-(d+g))+"px "+-y(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)}),1e3)}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 g,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,g=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(g)}}const pt=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})}}))}}},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)),g=T(h);let y=m[g],x=m[h];if(l){const t="y"===g?"bottom":"right";y=b(y+p["y"===g?"top":"left"],y,y-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),{[g]:y,[h]:x}));return u(a({},v),{data:{x:v.x-n,y:v.y-o}})}))}}},gt=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:g="none",flipAlignment:y=!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||!y?[D(c)]:function(t){const e=D(t);return[S(t),e,S(e)]}(c));p||"none"===g||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,y,g,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{}}))}}},yt=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),g=L(h),y=yield l.getDimensions(f),x="y"===h,v=x?"top":"left",w=x?"bottom":"right",E=x?"clientHeight":"clientWidth",T=r.reference[g]+r.reference[h]-m[h]-r.floating[g],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[g]);const C=T/2-A/2,F=D/2-y[g]/2-1,H=p(d[v],F),W=p(d[w],F),_=H,V=D-y[g]-W,B=D/2-y[g]/2+C,M=b(_,B,V),j=!s.arrow&&null!=O(i)&&B!==M&&r.reference[g]/2-(B<_?H:W)-y[g]/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:dt},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={},g=0;for(let n=0;n<c.length;n++){const{name:r,fn:y}=c[n],{x,y:v,data:w,reset:b}=yield y({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&&g<=50&&(g++,"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}))}}}]);
|