@db-ux/react-core-components 4.9.0 → 4.10.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/CHANGELOG.md +17 -1
- package/README.md +97 -35
- package/dist/components/accordion/accordion.js +102 -86
- package/dist/components/accordion/model.d.ts +2 -2
- package/dist/components/accordion/model.js +4 -2
- package/dist/components/accordion-item/accordion-item.d.ts +2 -1
- package/dist/components/accordion-item/accordion-item.js +89 -56
- package/dist/components/accordion-item/model.d.ts +5 -1
- package/dist/components/badge/badge.js +72 -32
- package/dist/components/badge/model.d.ts +1 -1
- package/dist/components/badge/model.js +12 -1
- package/dist/components/brand/brand.js +60 -13
- package/dist/components/brand/model.d.ts +1 -1
- package/dist/components/button/button.js +75 -21
- package/dist/components/button/model.d.ts +1 -1
- package/dist/components/button/model.js +13 -2
- package/dist/components/card/card.js +65 -15
- package/dist/components/card/model.d.ts +1 -1
- package/dist/components/card/model.js +8 -2
- package/dist/components/checkbox/checkbox.js +163 -157
- package/dist/components/checkbox/model.d.ts +1 -1
- package/dist/components/custom-button/custom-button.js +65 -10
- package/dist/components/custom-button/model.d.ts +2 -2
- package/dist/components/custom-select/custom-select.js +509 -727
- package/dist/components/custom-select/model.d.ts +4 -4
- package/dist/components/custom-select/model.js +8 -1
- package/dist/components/custom-select-dropdown/custom-select-dropdown.js +62 -11
- package/dist/components/custom-select-dropdown/model.d.ts +1 -1
- package/dist/components/custom-select-dropdown/model.js +8 -1
- package/dist/components/custom-select-form-field/custom-select-form-field.js +57 -10
- package/dist/components/custom-select-form-field/model.d.ts +1 -1
- package/dist/components/custom-select-list/custom-select-list.js +60 -11
- package/dist/components/custom-select-list/model.d.ts +1 -1
- package/dist/components/custom-select-list-item/custom-select-list-item.js +89 -32
- package/dist/components/custom-select-list-item/model.d.ts +1 -1
- package/dist/components/custom-select-list-item/model.js +4 -1
- package/dist/components/divider/divider.js +60 -10
- package/dist/components/divider/model.d.ts +1 -1
- package/dist/components/divider/model.js +4 -2
- package/dist/components/drawer/drawer.js +118 -97
- package/dist/components/drawer/model.d.ts +1 -1
- package/dist/components/drawer/model.js +14 -4
- package/dist/components/header/header.js +143 -65
- package/dist/components/header/model.d.ts +1 -1
- package/dist/components/icon/icon.js +61 -12
- package/dist/components/icon/model.d.ts +1 -1
- package/dist/components/icon/model.js +11 -1
- package/dist/components/infotext/infotext.js +62 -12
- package/dist/components/infotext/model.d.ts +1 -1
- package/dist/components/input/input.js +198 -167
- package/dist/components/input/model.d.ts +1 -1
- package/dist/components/input/model.js +21 -5
- package/dist/components/link/link.js +70 -12
- package/dist/components/link/model.d.ts +1 -1
- package/dist/components/link/model.js +8 -3
- package/dist/components/navigation/model.d.ts +1 -1
- package/dist/components/navigation/navigation.js +57 -11
- package/dist/components/navigation-item/model.d.ts +6 -2
- package/dist/components/navigation-item/navigation-item.js +117 -81
- package/dist/components/notification/model.d.ts +1 -1
- package/dist/components/notification/model.js +12 -3
- package/dist/components/notification/notification.js +100 -32
- package/dist/components/page/model.d.ts +1 -1
- package/dist/components/page/model.js +4 -2
- package/dist/components/page/page.js +74 -46
- package/dist/components/popover/model.d.ts +1 -1
- package/dist/components/popover/popover.js +126 -125
- package/dist/components/radio/model.d.ts +1 -1
- package/dist/components/radio/radio.js +124 -85
- package/dist/components/section/model.d.ts +1 -1
- package/dist/components/section/section.js +59 -10
- package/dist/components/select/model.d.ts +1 -1
- package/dist/components/select/select.js +188 -191
- package/dist/components/stack/model.d.ts +1 -1
- package/dist/components/stack/model.js +14 -4
- package/dist/components/stack/stack.js +63 -10
- package/dist/components/switch/model.d.ts +1 -1
- package/dist/components/switch/switch.js +182 -150
- package/dist/components/tab-item/model.d.ts +1 -1
- package/dist/components/tab-item/tab-item.js +105 -76
- package/dist/components/tab-list/model.d.ts +1 -1
- package/dist/components/tab-list/tab-list.js +60 -11
- package/dist/components/tab-panel/model.d.ts +1 -1
- package/dist/components/tab-panel/tab-panel.js +59 -13
- package/dist/components/tabs/model.d.ts +3 -3
- package/dist/components/tabs/model.js +4 -2
- package/dist/components/tabs/tabs.js +191 -178
- package/dist/components/tag/model.d.ts +1 -1
- package/dist/components/tag/model.js +4 -1
- package/dist/components/tag/tag.js +91 -32
- package/dist/components/textarea/model.d.ts +1 -1
- package/dist/components/textarea/model.js +13 -2
- package/dist/components/textarea/textarea.js +165 -150
- package/dist/components/tooltip/model.d.ts +1 -1
- package/dist/components/tooltip/model.js +4 -1
- package/dist/components/tooltip/tooltip.js +119 -115
- package/dist/index.js +64 -81
- package/dist/shared/constants.js +32 -94
- package/dist/shared/figma.d.ts +12 -6
- package/dist/shared/model.js +73 -22
- package/dist/utils/document-click-listener.js +26 -29
- package/dist/utils/document-scroll-listener.js +30 -38
- package/dist/utils/floating-components.js +107 -358
- package/dist/utils/form-components.js +34 -60
- package/dist/utils/index.js +49 -167
- package/dist/utils/navigation.js +68 -135
- package/dist/utils/react.js +10 -15
- package/package.json +11 -8
- package/dist/components/accordion/index.js +0 -1
- package/dist/components/accordion-item/index.js +0 -1
- package/dist/components/accordion-item/model.js +0 -1
- package/dist/components/badge/index.js +0 -1
- package/dist/components/brand/index.js +0 -1
- package/dist/components/brand/model.js +0 -1
- package/dist/components/button/index.js +0 -1
- package/dist/components/card/index.js +0 -1
- package/dist/components/checkbox/index.js +0 -1
- package/dist/components/checkbox/model.js +0 -1
- package/dist/components/custom-button/index.js +0 -1
- package/dist/components/custom-button/model.js +0 -1
- package/dist/components/custom-select/index.js +0 -1
- package/dist/components/custom-select-dropdown/index.js +0 -1
- package/dist/components/custom-select-form-field/index.js +0 -1
- package/dist/components/custom-select-form-field/model.js +0 -1
- package/dist/components/custom-select-list/index.js +0 -1
- package/dist/components/custom-select-list/model.js +0 -1
- package/dist/components/custom-select-list-item/index.js +0 -1
- package/dist/components/divider/index.js +0 -1
- package/dist/components/drawer/index.js +0 -1
- package/dist/components/header/index.js +0 -1
- package/dist/components/header/model.js +0 -1
- package/dist/components/icon/index.js +0 -1
- package/dist/components/infotext/index.js +0 -1
- package/dist/components/infotext/model.js +0 -1
- package/dist/components/input/index.js +0 -1
- package/dist/components/link/index.js +0 -1
- package/dist/components/navigation/index.js +0 -1
- package/dist/components/navigation/model.js +0 -1
- package/dist/components/navigation-item/index.js +0 -1
- package/dist/components/navigation-item/model.js +0 -1
- package/dist/components/notification/index.js +0 -1
- package/dist/components/page/index.js +0 -1
- package/dist/components/popover/index.js +0 -1
- package/dist/components/popover/model.js +0 -1
- package/dist/components/radio/index.js +0 -1
- package/dist/components/radio/model.js +0 -1
- package/dist/components/section/index.js +0 -1
- package/dist/components/section/model.js +0 -1
- package/dist/components/select/index.js +0 -1
- package/dist/components/select/model.js +0 -1
- package/dist/components/stack/index.js +0 -1
- package/dist/components/switch/index.js +0 -1
- package/dist/components/switch/model.js +0 -1
- package/dist/components/tab-item/index.js +0 -1
- package/dist/components/tab-item/model.js +0 -1
- package/dist/components/tab-list/index.js +0 -1
- package/dist/components/tab-list/model.js +0 -1
- package/dist/components/tab-panel/index.js +0 -1
- package/dist/components/tab-panel/model.js +0 -1
- package/dist/components/tabs/index.js +0 -1
- package/dist/components/tag/index.js +0 -1
- package/dist/components/textarea/index.js +0 -1
- package/dist/components/tooltip/index.js +0 -1
- package/dist/shared/examples/index.js +0 -4
- package/dist/shared/figma.js +0 -1
- package/dist/shared/showcase/show-code-link.js +0 -51
|
@@ -1,99 +1,120 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import {
|
|
7
|
-
import
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
2
|
+
import { filterPassingProps as e, getRootProps as t } from "../../utils/react.js";
|
|
3
|
+
import { cls as n, delay as r, getBoolean as i, getBooleanAsString as a, isKeyboardEvent as o } from "../../utils/index.js";
|
|
4
|
+
import "../../shared/constants.js";
|
|
5
|
+
import s from "../button/button.js";
|
|
6
|
+
import { forwardRef as c, useEffect as l, useRef as u, useState as d } from "react";
|
|
7
|
+
import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
|
|
8
|
+
//#region src/components/drawer/drawer.tsx
|
|
9
|
+
function h(c, h) {
|
|
10
|
+
let g = h || u(h), _ = u(null), [v, y] = d(() => !1);
|
|
11
|
+
function b(e, t) {
|
|
12
|
+
e && (o(e) ? e.key === "Escape" && (e.preventDefault(), c.onClose && c.onClose(e)) : (t && (e.stopPropagation(), c.onClose && c.onClose(e)), e.target?.nodeName === "DIALOG" && e.type === "click" && c.backdrop !== "none" && c.onClose && c.onClose(e)));
|
|
13
|
+
}
|
|
14
|
+
function x() {
|
|
15
|
+
if (g.current) {
|
|
16
|
+
let e = i(c.open, "open");
|
|
17
|
+
e && !g.current.open && (_.current && _.current.removeAttribute("data-transition"), c.position === "absolute" || c.backdrop === "none" || c.variant === "inside" ? g.current.show() : g.current.showModal(), r(() => {
|
|
18
|
+
_.current && (_.current.dataset.transition = "open");
|
|
19
|
+
}, 1)), !e && g.current.open && (_.current && (_.current.dataset.transition = "close"), r(() => {
|
|
20
|
+
g.current?.close();
|
|
21
|
+
}, 401));
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
return l(() => {
|
|
25
|
+
x(), y(!0);
|
|
26
|
+
}, []), l(() => {
|
|
27
|
+
x();
|
|
28
|
+
}, [c.open]), l(() => {
|
|
29
|
+
if (g.current && v && c.position === "absolute") {
|
|
30
|
+
let e = g.current.parentElement;
|
|
31
|
+
e && (e.style.position = "relative");
|
|
32
|
+
}
|
|
33
|
+
}, [
|
|
34
|
+
g.current,
|
|
35
|
+
v,
|
|
36
|
+
c.position
|
|
37
|
+
]), /* @__PURE__ */ p("dialog", {
|
|
38
|
+
className: "db-drawer",
|
|
39
|
+
id: c.id ?? c.propOverrides?.id,
|
|
40
|
+
ref: g,
|
|
41
|
+
...e(c, [
|
|
42
|
+
"data-icon-variant",
|
|
43
|
+
"data-icon-variant-before",
|
|
44
|
+
"data-icon-variant-after",
|
|
45
|
+
"data-icon-weight",
|
|
46
|
+
"data-icon-weight-before",
|
|
47
|
+
"data-icon-weight-after",
|
|
48
|
+
"data-interactive",
|
|
49
|
+
"data-force-mobile",
|
|
50
|
+
"data-color",
|
|
51
|
+
"data-container-color",
|
|
52
|
+
"data-bg-color",
|
|
53
|
+
"data-on-bg-color",
|
|
54
|
+
"data-color-scheme",
|
|
55
|
+
"data-font-size",
|
|
56
|
+
"data-headline-size",
|
|
57
|
+
"data-divider",
|
|
58
|
+
"data-focus",
|
|
59
|
+
"data-font",
|
|
60
|
+
"data-density",
|
|
61
|
+
"onClose"
|
|
62
|
+
]),
|
|
63
|
+
onClick: (e) => b(e),
|
|
64
|
+
onKeyDown: (e) => b(e),
|
|
65
|
+
"data-position": c.position,
|
|
66
|
+
"data-backdrop": c.backdrop,
|
|
67
|
+
"data-direction": c.direction,
|
|
68
|
+
"data-variant": c.variant,
|
|
69
|
+
children: /* @__PURE__ */ m("article", {
|
|
70
|
+
ref: _,
|
|
71
|
+
...t(c, [
|
|
72
|
+
"data-icon-variant",
|
|
73
|
+
"data-icon-variant-before",
|
|
74
|
+
"data-icon-variant-after",
|
|
75
|
+
"data-icon-weight",
|
|
76
|
+
"data-icon-weight-before",
|
|
77
|
+
"data-icon-weight-after",
|
|
78
|
+
"data-interactive",
|
|
79
|
+
"data-force-mobile",
|
|
80
|
+
"data-color",
|
|
81
|
+
"data-container-color",
|
|
82
|
+
"data-bg-color",
|
|
83
|
+
"data-on-bg-color",
|
|
84
|
+
"data-color-scheme",
|
|
85
|
+
"data-font-size",
|
|
86
|
+
"data-headline-size",
|
|
87
|
+
"data-divider",
|
|
88
|
+
"data-focus",
|
|
89
|
+
"data-font",
|
|
90
|
+
"data-density"
|
|
91
|
+
]),
|
|
92
|
+
className: n("db-drawer-container", c.className),
|
|
93
|
+
"data-spacing": c.spacing,
|
|
94
|
+
"data-width": c.width,
|
|
95
|
+
"data-direction": c.direction,
|
|
96
|
+
"data-rounded": a(c.rounded),
|
|
97
|
+
children: [/* @__PURE__ */ m("header", {
|
|
98
|
+
className: "db-drawer-header",
|
|
99
|
+
children: [/* @__PURE__ */ p("div", {
|
|
100
|
+
className: "db-drawer-header-text",
|
|
101
|
+
children: /* @__PURE__ */ p(f, { children: c.drawerHeader })
|
|
102
|
+
}), /* @__PURE__ */ p(s, {
|
|
103
|
+
className: "button-close-drawer",
|
|
104
|
+
icon: "cross",
|
|
105
|
+
variant: "ghost",
|
|
106
|
+
id: c.closeButtonId,
|
|
107
|
+
noText: !0,
|
|
108
|
+
onClick: (e) => b(e, !0),
|
|
109
|
+
children: c.closeButtonText ?? "Close"
|
|
110
|
+
})]
|
|
111
|
+
}), /* @__PURE__ */ p("div", {
|
|
112
|
+
className: "db-drawer-content",
|
|
113
|
+
children: c.children
|
|
114
|
+
})]
|
|
115
|
+
})
|
|
116
|
+
});
|
|
97
117
|
}
|
|
98
|
-
|
|
99
|
-
|
|
118
|
+
var g = c(h);
|
|
119
|
+
//#endregion
|
|
120
|
+
export { g as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ClickEvent, CloseEventProps, CloseEventState, GeneralKeyboardEvent, GlobalProps, GlobalState, InitializedState, InnerCloseButtonProps, SpacingProps, WidthProps } from '../../shared/model';
|
|
1
|
+
import type { ClickEvent, CloseEventProps, CloseEventState, GeneralKeyboardEvent, GlobalProps, GlobalState, InitializedState, InnerCloseButtonProps, SpacingProps, WidthProps } from '../../shared/model';
|
|
2
2
|
export declare const DrawerBackdropList: readonly ["none", "strong", "weak", "invisible"];
|
|
3
3
|
export type DrawerBackdropType = (typeof DrawerBackdropList)[number];
|
|
4
4
|
export declare const DrawerDirectionList: readonly ["left", "right", "up", "down"];
|
|
@@ -1,4 +1,14 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
//#region src/components/drawer/model.ts
|
|
2
|
+
var e = [
|
|
3
|
+
"none",
|
|
4
|
+
"strong",
|
|
5
|
+
"weak",
|
|
6
|
+
"invisible"
|
|
7
|
+
], t = [
|
|
8
|
+
"left",
|
|
9
|
+
"right",
|
|
10
|
+
"up",
|
|
11
|
+
"down"
|
|
12
|
+
], n = ["modal", "inside"], r = ["fixed", "absolute"];
|
|
13
|
+
//#endregion
|
|
14
|
+
export { e as DrawerBackdropList, t as DrawerDirectionList, r as DrawerPositionList, n as DrawerVariantList };
|
|
@@ -1,67 +1,145 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import { isEventTargetNavigationItem } from "../../utils/navigation";
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
2
|
+
import { filterPassingProps as e, getRootProps as t } from "../../utils/react.js";
|
|
3
|
+
import { addAttributeToChildren as n, cls as r, getBoolean as i } from "../../utils/index.js";
|
|
4
|
+
import "../../shared/constants.js";
|
|
5
|
+
import a from "../button/button.js";
|
|
6
|
+
import o from "../drawer/drawer.js";
|
|
7
|
+
import { isEventTargetNavigationItem as s } from "../../utils/navigation.js";
|
|
8
|
+
import { forwardRef as c, useEffect as l, useRef as u, useState as d } from "react";
|
|
9
|
+
import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
|
|
10
|
+
//#region src/components/header/header.tsx
|
|
11
|
+
function h(c, h) {
|
|
12
|
+
let g = h || u(h), [_, v] = d(() => !1), [y, b] = d(() => !1);
|
|
13
|
+
function x(e) {
|
|
14
|
+
e && e.stopPropagation && e.stopPropagation();
|
|
15
|
+
let t = !i(c.drawerOpen, "drawerOpen");
|
|
16
|
+
c.onToggle && c.onToggle(t);
|
|
17
|
+
}
|
|
18
|
+
function S(e) {
|
|
19
|
+
s(e) && x();
|
|
20
|
+
}
|
|
21
|
+
return l(() => {
|
|
22
|
+
v(!0);
|
|
23
|
+
}, []), l(() => {
|
|
24
|
+
_ && g.current && c.forceMobile && (n(g.current, {
|
|
25
|
+
key: "data-force-mobile",
|
|
26
|
+
value: "true"
|
|
27
|
+
}), b(!0));
|
|
28
|
+
}, [_, g.current]), /* @__PURE__ */ m("header", {
|
|
29
|
+
ref: g,
|
|
30
|
+
...e(c, [
|
|
31
|
+
"data-icon-variant",
|
|
32
|
+
"data-icon-variant-before",
|
|
33
|
+
"data-icon-variant-after",
|
|
34
|
+
"data-icon-weight",
|
|
35
|
+
"data-icon-weight-before",
|
|
36
|
+
"data-icon-weight-after",
|
|
37
|
+
"data-interactive",
|
|
38
|
+
"data-force-mobile",
|
|
39
|
+
"data-color",
|
|
40
|
+
"data-container-color",
|
|
41
|
+
"data-bg-color",
|
|
42
|
+
"data-on-bg-color",
|
|
43
|
+
"data-color-scheme",
|
|
44
|
+
"data-font-size",
|
|
45
|
+
"data-headline-size",
|
|
46
|
+
"data-divider",
|
|
47
|
+
"data-focus",
|
|
48
|
+
"data-font",
|
|
49
|
+
"data-density",
|
|
50
|
+
"onToggle"
|
|
51
|
+
]),
|
|
52
|
+
...t(c, [
|
|
53
|
+
"data-icon-variant",
|
|
54
|
+
"data-icon-variant-before",
|
|
55
|
+
"data-icon-variant-after",
|
|
56
|
+
"data-icon-weight",
|
|
57
|
+
"data-icon-weight-before",
|
|
58
|
+
"data-icon-weight-after",
|
|
59
|
+
"data-interactive",
|
|
60
|
+
"data-force-mobile",
|
|
61
|
+
"data-color",
|
|
62
|
+
"data-container-color",
|
|
63
|
+
"data-bg-color",
|
|
64
|
+
"data-on-bg-color",
|
|
65
|
+
"data-color-scheme",
|
|
66
|
+
"data-font-size",
|
|
67
|
+
"data-headline-size",
|
|
68
|
+
"data-divider",
|
|
69
|
+
"data-focus",
|
|
70
|
+
"data-font",
|
|
71
|
+
"data-density"
|
|
72
|
+
]),
|
|
73
|
+
className: r("db-header", c.className),
|
|
74
|
+
id: c.id ?? c.propOverrides?.id,
|
|
75
|
+
"data-width": c.width,
|
|
76
|
+
"data-on-forcing-mobile": c.forceMobile && !y,
|
|
77
|
+
children: [
|
|
78
|
+
/* @__PURE__ */ p("div", {
|
|
79
|
+
className: "db-header-meta-navigation",
|
|
80
|
+
children: /* @__PURE__ */ p(f, { children: c.metaNavigation })
|
|
81
|
+
}),
|
|
82
|
+
/* @__PURE__ */ m("div", {
|
|
83
|
+
className: "db-header-navigation-bar",
|
|
84
|
+
children: [
|
|
85
|
+
/* @__PURE__ */ p("div", {
|
|
86
|
+
className: "db-header-brand-container",
|
|
87
|
+
children: /* @__PURE__ */ p(f, { children: c.brand })
|
|
88
|
+
}),
|
|
89
|
+
/* @__PURE__ */ m("div", {
|
|
90
|
+
className: "db-header-navigation-container",
|
|
91
|
+
children: [/* @__PURE__ */ p("div", {
|
|
92
|
+
className: "db-header-navigation",
|
|
93
|
+
children: c.children
|
|
94
|
+
}), /* @__PURE__ */ p("div", {
|
|
95
|
+
className: "db-header-primary-action",
|
|
96
|
+
children: /* @__PURE__ */ p(f, { children: c.primaryAction })
|
|
97
|
+
})]
|
|
98
|
+
}),
|
|
99
|
+
/* @__PURE__ */ m("div", {
|
|
100
|
+
className: "db-header-action-container",
|
|
101
|
+
children: [/* @__PURE__ */ p("div", {
|
|
102
|
+
className: "db-header-burger-menu-container",
|
|
103
|
+
children: /* @__PURE__ */ p(a, {
|
|
104
|
+
icon: "menu",
|
|
105
|
+
variant: "ghost",
|
|
106
|
+
noText: !0,
|
|
107
|
+
onClick: (e) => x(),
|
|
108
|
+
children: c.burgerMenuLabel ?? "BurgerMenu"
|
|
109
|
+
})
|
|
110
|
+
}), /* @__PURE__ */ p("div", {
|
|
111
|
+
className: "db-header-secondary-action",
|
|
112
|
+
children: /* @__PURE__ */ p(f, { children: c.secondaryAction })
|
|
113
|
+
})]
|
|
114
|
+
})
|
|
115
|
+
]
|
|
116
|
+
}),
|
|
117
|
+
/* @__PURE__ */ m(o, {
|
|
118
|
+
className: "db-header-drawer",
|
|
119
|
+
spacing: "small",
|
|
120
|
+
rounded: !0,
|
|
121
|
+
closeButtonId: c.closeButtonId,
|
|
122
|
+
closeButtonText: c.closeButtonText,
|
|
123
|
+
open: i(c.drawerOpen),
|
|
124
|
+
onClose: (e) => x(),
|
|
125
|
+
children: [/* @__PURE__ */ m("div", {
|
|
126
|
+
className: "db-header-drawer-navigation",
|
|
127
|
+
children: [/* @__PURE__ */ p("div", {
|
|
128
|
+
className: "db-header-navigation",
|
|
129
|
+
onClick: (e) => S(e),
|
|
130
|
+
children: c.children
|
|
131
|
+
}), /* @__PURE__ */ p("div", {
|
|
132
|
+
className: "db-header-meta-navigation",
|
|
133
|
+
children: /* @__PURE__ */ p(f, { children: c.metaNavigation })
|
|
134
|
+
})]
|
|
135
|
+
}), /* @__PURE__ */ p("div", {
|
|
136
|
+
className: "db-header-secondary-action",
|
|
137
|
+
children: /* @__PURE__ */ p(f, { children: c.secondaryAction })
|
|
138
|
+
})]
|
|
139
|
+
})
|
|
140
|
+
]
|
|
141
|
+
});
|
|
65
142
|
}
|
|
66
|
-
|
|
67
|
-
|
|
143
|
+
var g = c(h);
|
|
144
|
+
//#endregion
|
|
145
|
+
export { g as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ContainerWidthProps, GlobalProps, GlobalState, InitializedState, InnerCloseButtonProps, NavigationBehaviorState, ToggleEventProps, ToggleEventState } from '../../shared/model';
|
|
1
|
+
import type { ContainerWidthProps, GlobalProps, GlobalState, InitializedState, InnerCloseButtonProps, NavigationBehaviorState, ToggleEventProps, ToggleEventState } from '../../shared/model';
|
|
2
2
|
export type DBHeaderDefaultProps = {
|
|
3
3
|
/**
|
|
4
4
|
* Slot to pass in the DBBrand component
|
|
@@ -1,14 +1,63 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
2
|
+
import { filterPassingProps as e, getRootProps as t } from "../../utils/react.js";
|
|
3
|
+
import { cls as n } from "../../utils/index.js";
|
|
4
|
+
import { forwardRef as r, useRef as i } from "react";
|
|
5
|
+
import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
|
|
6
|
+
//#region src/components/icon/icon.tsx
|
|
7
|
+
function c(r, c) {
|
|
8
|
+
return /* @__PURE__ */ s("span", {
|
|
9
|
+
"aria-hidden": "true",
|
|
10
|
+
ref: c || i(c),
|
|
11
|
+
...e(r, [
|
|
12
|
+
"data-icon-variant",
|
|
13
|
+
"data-icon-variant-before",
|
|
14
|
+
"data-icon-variant-after",
|
|
15
|
+
"data-icon-weight",
|
|
16
|
+
"data-icon-weight-before",
|
|
17
|
+
"data-icon-weight-after",
|
|
18
|
+
"data-interactive",
|
|
19
|
+
"data-force-mobile",
|
|
20
|
+
"data-color",
|
|
21
|
+
"data-container-color",
|
|
22
|
+
"data-bg-color",
|
|
23
|
+
"data-on-bg-color",
|
|
24
|
+
"data-color-scheme",
|
|
25
|
+
"data-font-size",
|
|
26
|
+
"data-headline-size",
|
|
27
|
+
"data-divider",
|
|
28
|
+
"data-focus",
|
|
29
|
+
"data-font",
|
|
30
|
+
"data-density"
|
|
31
|
+
]),
|
|
32
|
+
id: r.id ?? r.propOverrides?.id,
|
|
33
|
+
...t(r, [
|
|
34
|
+
"data-icon-variant",
|
|
35
|
+
"data-icon-variant-before",
|
|
36
|
+
"data-icon-variant-after",
|
|
37
|
+
"data-icon-weight",
|
|
38
|
+
"data-icon-weight-before",
|
|
39
|
+
"data-icon-weight-after",
|
|
40
|
+
"data-interactive",
|
|
41
|
+
"data-force-mobile",
|
|
42
|
+
"data-color",
|
|
43
|
+
"data-container-color",
|
|
44
|
+
"data-bg-color",
|
|
45
|
+
"data-on-bg-color",
|
|
46
|
+
"data-color-scheme",
|
|
47
|
+
"data-font-size",
|
|
48
|
+
"data-headline-size",
|
|
49
|
+
"data-divider",
|
|
50
|
+
"data-focus",
|
|
51
|
+
"data-font",
|
|
52
|
+
"data-density"
|
|
53
|
+
]),
|
|
54
|
+
className: n("db-icon", r.className),
|
|
55
|
+
"data-icon": r.icon,
|
|
56
|
+
"data-icon-weight": r.weight,
|
|
57
|
+
"data-icon-variant": r.variant,
|
|
58
|
+
children: [r.text ? /* @__PURE__ */ o(a, { children: r.text }) : null, r.children]
|
|
59
|
+
});
|
|
12
60
|
}
|
|
13
|
-
|
|
14
|
-
|
|
61
|
+
var l = r(c);
|
|
62
|
+
//#endregion
|
|
63
|
+
export { l as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { GlobalProps, GlobalState, IconProps, TextProps } from '../../shared/model';
|
|
1
|
+
import type { GlobalProps, GlobalState, IconProps, TextProps } from '../../shared/model';
|
|
2
2
|
export declare const IconWeightList: readonly ["16", "20", "24", "32", "48", "64"];
|
|
3
3
|
export type IconWeightType = (typeof IconWeightList)[number];
|
|
4
4
|
export type DBIconDefaultProps = {
|