asma-ui-core 3.25.1 → 3.27.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.
Files changed (44) hide show
  1. package/dist/asma-ui-core.css +1 -1
  2. package/dist/components/custom/module/header-layout/DynamicToolbar.js +245 -0
  3. package/dist/components/custom/module/header-layout/DynamicToolbarLayoutContext.js +13 -0
  4. package/dist/components/custom/module/header-layout/ToolbarActionGroup.js +82 -0
  5. package/dist/components/custom/module/header-layout/ToolbarMeasurement.js +56 -0
  6. package/dist/components/custom/module/header-layout/ToolbarRows.js +131 -0
  7. package/dist/components/custom/module/header-layout/estimateToolbarLayout.js +189 -0
  8. package/dist/components/custom/module/header-layout/planToolbarActions.js +130 -0
  9. package/dist/components/custom/module/header-layout/useTranslations.js +23 -0
  10. package/dist/components/custom/widget/widget-header/StyledWidgetHeader.js +15 -12
  11. package/dist/components/icons/hub-icon/HubIcon.js +16 -0
  12. package/dist/components/icons/hub-icon/HubIconFilled.js +16 -0
  13. package/dist/components/icons/hub-icon/index.js +2 -0
  14. package/dist/components/icons/index.js +2 -0
  15. package/dist/components/icons/widgets-icon/WidgetIcon.js +16 -0
  16. package/dist/components/icons/widgets-icon/WidgetIconFilled.js +16 -0
  17. package/dist/components/icons/widgets-icon/index.js +2 -0
  18. package/dist/components/utils/filter-menu/StyledFilterButton.js +22 -18
  19. package/dist/components/utils/filter-menu/StyledFilterMenu.js +20 -19
  20. package/dist/hooks/useElementWidthPx.js +26 -0
  21. package/dist/hooks/useWidthRegistry.js +37 -0
  22. package/dist/index.js +287 -267
  23. package/dist/src/components/custom/module/header-layout/DynamicToolbar.d.ts +25 -0
  24. package/dist/src/components/custom/module/header-layout/DynamicToolbarLayoutContext.d.ts +7 -0
  25. package/dist/src/components/custom/module/header-layout/ToolbarActionGroup.d.ts +19 -0
  26. package/dist/src/components/custom/module/header-layout/ToolbarMeasurement.d.ts +27 -0
  27. package/dist/src/components/custom/module/header-layout/ToolbarRows.d.ts +65 -0
  28. package/dist/src/components/custom/module/header-layout/estimateToolbarLayout.d.ts +95 -0
  29. package/dist/src/components/custom/module/header-layout/index.d.ts +3 -0
  30. package/dist/src/components/custom/module/header-layout/planToolbarActions.d.ts +72 -0
  31. package/dist/src/components/custom/module/header-layout/useTranslations.d.ts +17 -0
  32. package/dist/src/components/icons/hub-icon/HubIcon.d.ts +2 -0
  33. package/dist/src/components/icons/hub-icon/HubIconFilled.d.ts +2 -0
  34. package/dist/src/components/icons/hub-icon/index.d.ts +2 -0
  35. package/dist/src/components/icons/index.d.ts +2 -0
  36. package/dist/src/components/icons/widgets-icon/WidgetIcon.d.ts +2 -0
  37. package/dist/src/components/icons/widgets-icon/WidgetIconFilled.d.ts +2 -0
  38. package/dist/src/components/icons/widgets-icon/index.d.ts +2 -0
  39. package/dist/src/components/utils/filter-menu/StyledFilterButton.d.ts +1 -0
  40. package/dist/src/components/utils/filter-menu/StyledFilterMenu.d.ts +1 -0
  41. package/dist/src/hooks/useElementWidthPx.d.ts +10 -0
  42. package/dist/src/hooks/useWidthRegistry.d.ts +21 -0
  43. package/dist/src/index.d.ts +1 -0
  44. package/package.json +1 -1
@@ -0,0 +1,189 @@
1
+ import { resolveToolbarActionWidth as U } from "./planToolbarActions.js";
2
+ var l = 8, y = 12, w = 168, C = 44, G = 92, H = 44, Y = 148, D = 44, V = 168, J = 11, K = 96, B = 360, j = 12;
3
+ function m(t) {
4
+ return {
5
+ leading: t?.leadingUtilityWidthPx ?? C,
6
+ search: t?.searchWidthPx ?? w,
7
+ selectionIndicator: t?.selectionIndicatorWidthPx ?? V,
8
+ filter: (i) => i ? t?.filterIconWidthPx ?? H : t?.filterLabelWidthPx ?? G,
9
+ trailing: (i) => i ? t?.trailingIconWidthPx ?? D : t?.trailingLabelWidthPx ?? Y
10
+ };
11
+ }
12
+ function q(t) {
13
+ return t ? typeof t == "string" ? t.length : j : 0;
14
+ }
15
+ function z(t) {
16
+ const i = q(t), e = i > 0 ? i * J + 24 : 0;
17
+ return Math.min(B, Math.max(K, e));
18
+ }
19
+ function Q(t, i) {
20
+ return i != null && i > 0 ? Math.min(B, i) : z(t);
21
+ }
22
+ function v(t, i, e) {
23
+ const n = t.filter((r) => !r.hidden);
24
+ return n.length ? n.reduce((r, c) => r + U(c, i, e) + l, 0) - l : 0;
25
+ }
26
+ function E(t, i, e) {
27
+ const n = t.filter((s) => !s.hidden).sort((s, u) => (u.priority ?? 0) - (s.priority ?? 0));
28
+ if (!n.length) return 0;
29
+ const r = n.slice(0, i), c = v(r, !0, e);
30
+ return n.length === r.length ? c : c + (r.length ? l : 0) + 40;
31
+ }
32
+ function tt(t, i, e, n = 3) {
33
+ return t > 0 ? t : E(i, n, e);
34
+ }
35
+ function S(t) {
36
+ const { hasLeadingUtility: i, hasFilter: e, hasSearch: n, hasTrailingUtility: r, showPageActions: c, showBulkActions: s, filterIconOnly: u, trailingIconOnly: h, pageActionsWidthPx: I, bulkActionsWidthPx: O, searchBeforeFilter: W = !1, measured: g } = t, d = m(g);
37
+ let o = 0;
38
+ c && i && (o += d.leading + l);
39
+ const f = e ? d.filter(u) + l : 0, p = n ? d.search + l : 0;
40
+ return W ? o += p + f : o += f + p, c && (I > 0 && (o += I + l), r && (o += d.trailing(h) + l)), s && O > 0 && (o += O + l), Math.max(0, o - l);
41
+ }
42
+ function it(t) {
43
+ const { containerWidth: i, isMobile: e, isSelectionMode: n, compactBreakpointPx: r, reserveBulkActionsWidthPx: c, title: s, hasLeadingUtility: u, hasFilter: h, hasSearch: I, hasTrailingUtility: O, pageActions: W, bulkActions: g, maxVisibleBulkActions: d = 2, measured: o } = t, f = i > 0 ? i : Number.POSITIVE_INFINITY, p = !n, F = n, M = n ? 0 : c, b = m(o), _ = Q(s, o?.titleWidthPx), P = v(W, !0, o?.actionWidthPx), L = v(W, !1, o?.actionWidthPx), k = E(g, d, o?.actionWidthPx), A = (a) => S({
44
+ hasLeadingUtility: u,
45
+ hasFilter: h,
46
+ hasSearch: I,
47
+ hasTrailingUtility: O,
48
+ showPageActions: p,
49
+ showBulkActions: F,
50
+ bulkActionsWidthPx: 0,
51
+ measured: o,
52
+ ...a
53
+ });
54
+ if (e || f < r) {
55
+ const a = (x) => f >= A({
56
+ ...x,
57
+ searchBeforeFilter: !0
58
+ }), T = (x) => n ? !0 : x;
59
+ return a({
60
+ filterIconOnly: !1,
61
+ trailingIconOnly: !1,
62
+ pageActionsWidthPx: P
63
+ }) ? {
64
+ mode: "compact",
65
+ filterIconOnly: !1,
66
+ trailingIconOnly: T(!1)
67
+ } : a({
68
+ filterIconOnly: !1,
69
+ trailingIconOnly: !0,
70
+ pageActionsWidthPx: P
71
+ }) ? {
72
+ mode: "compact",
73
+ filterIconOnly: !1,
74
+ trailingIconOnly: !0
75
+ } : a({
76
+ filterIconOnly: !1,
77
+ trailingIconOnly: !0,
78
+ pageActionsWidthPx: L
79
+ }) ? {
80
+ mode: "compact",
81
+ filterIconOnly: !1,
82
+ trailingIconOnly: !0
83
+ } : {
84
+ mode: "compact",
85
+ filterIconOnly: !0,
86
+ trailingIconOnly: !0
87
+ };
88
+ }
89
+ if (n) {
90
+ const a = (R) => S({
91
+ hasLeadingUtility: !1,
92
+ hasFilter: h,
93
+ hasSearch: I,
94
+ hasTrailingUtility: !1,
95
+ showPageActions: !1,
96
+ showBulkActions: !1,
97
+ filterIconOnly: R,
98
+ trailingIconOnly: !0,
99
+ pageActionsWidthPx: 0,
100
+ bulkActionsWidthPx: 0,
101
+ measured: o
102
+ });
103
+ if (f >= _ + b.selectionIndicator + A({
104
+ filterIconOnly: !1,
105
+ trailingIconOnly: !0,
106
+ pageActionsWidthPx: 0,
107
+ bulkActionsWidthPx: k
108
+ }) + y) return {
109
+ mode: "inline",
110
+ filterIconOnly: !1,
111
+ trailingIconOnly: !0
112
+ };
113
+ const T = _ + a(!1) + y, x = b.selectionIndicator + k + y;
114
+ return f >= Math.max(T, x) ? {
115
+ mode: "selection-split",
116
+ filterIconOnly: f < _ + a(!0) + y,
117
+ trailingIconOnly: !0
118
+ } : {
119
+ mode: "compact",
120
+ filterIconOnly: !0,
121
+ trailingIconOnly: !0
122
+ };
123
+ }
124
+ const N = (a) => f >= _ + A(a) + M + y, X = [
125
+ {
126
+ filterIconOnly: !1,
127
+ trailingIconOnly: !1,
128
+ pageActionsWidthPx: P
129
+ },
130
+ {
131
+ filterIconOnly: !1,
132
+ trailingIconOnly: !0,
133
+ pageActionsWidthPx: P
134
+ },
135
+ {
136
+ filterIconOnly: !1,
137
+ trailingIconOnly: !0,
138
+ pageActionsWidthPx: L
139
+ },
140
+ {
141
+ filterIconOnly: !0,
142
+ trailingIconOnly: !0,
143
+ pageActionsWidthPx: L
144
+ }
145
+ ];
146
+ for (const a of X) if (N(a)) return {
147
+ mode: "inline",
148
+ filterIconOnly: a.filterIconOnly,
149
+ trailingIconOnly: a.trailingIconOnly
150
+ };
151
+ return f >= A({
152
+ filterIconOnly: !1,
153
+ trailingIconOnly: !1,
154
+ pageActionsWidthPx: P,
155
+ searchBeforeFilter: !0
156
+ }) ? {
157
+ mode: "stacked",
158
+ filterIconOnly: !1,
159
+ trailingIconOnly: !1
160
+ } : f >= A({
161
+ filterIconOnly: !0,
162
+ trailingIconOnly: !0,
163
+ pageActionsWidthPx: L,
164
+ searchBeforeFilter: !0
165
+ }) ? {
166
+ mode: "stacked",
167
+ filterIconOnly: !0,
168
+ trailingIconOnly: !0
169
+ } : {
170
+ mode: "compact",
171
+ filterIconOnly: !0,
172
+ trailingIconOnly: !0
173
+ };
174
+ }
175
+ function nt(t) {
176
+ const { layoutMode: i, containerWidth: e, titleWidth: n, filterIconOnly: r, trailingIconOnly: c, hasFilter: s, hasSearch: u, hasLeadingUtility: h, hasTrailingUtility: I, reserveBulkActionsWidthPx: O, measured: W } = t, g = m(W), d = (h ? g.leading + l : 0) + (s ? g.filter(r) + l : 0) + (u ? g.search + l : 0) + (I ? g.trailing(c) + l : 0);
177
+ return i === "stacked" || i === "compact" ? Math.max(80, e - d) : Math.max(80, e - n - d - y - O);
178
+ }
179
+ function et(t) {
180
+ const { layoutMode: i, containerWidth: e, titleWidth: n, filterIconOnly: r, hasFilter: c, hasSearch: s, measured: u } = t, h = m(u), I = (c ? h.filter(r) + l : 0) + (s ? h.search + l : 0);
181
+ return i === "inline" ? Math.max(120, e - n - h.selectionIndicator - I - y * 2) : Math.max(120, e - h.selectionIndicator - y);
182
+ }
183
+ export {
184
+ et as resolveBulkActionsAvailableWidth,
185
+ nt as resolvePageActionsAvailableWidth,
186
+ tt as resolveReserveBulkActionsWidthPx,
187
+ Q as resolveTitleAreaWidth,
188
+ it as resolveToolbarLayout
189
+ };
@@ -0,0 +1,130 @@
1
+ var y = 8, C = 40, I = 40, P = 42, W = 22, m = 7, _ = 26, b = 0.55;
2
+ function T(t, e) {
3
+ if (t.estimatedWidthPx) return e ? t.estimatedWidthPx : Math.max(I, Math.floor(t.estimatedWidthPx * b));
4
+ const n = t.icon ? W : 0, i = e ? Math.max(_, t.label.length * m) : 0;
5
+ return P + n + i;
6
+ }
7
+ function A(t, e, n) {
8
+ return n?.(t, e) ?? T(t, e);
9
+ }
10
+ function p(t) {
11
+ return t.length ? t.reduce((e, n) => e + n.width, 0) + (t.length - 1) * 8 : 0;
12
+ }
13
+ function g(t, e, n) {
14
+ const i = p(t);
15
+ return e ? i + (t.length ? 8 : 0) + n : i;
16
+ }
17
+ function w(t) {
18
+ return t.filter((e) => !e.hidden).sort((e, n) => (n.priority ?? 0) - (e.priority ?? 0));
19
+ }
20
+ function x(t) {
21
+ return [...t].sort((e, n) => (n.priority ?? 0) - (e.priority ?? 0));
22
+ }
23
+ function N(t, e, n) {
24
+ const i = [...t];
25
+ for (let s = i.length - 1; s >= 0 && p(i) > e; s -= 1) {
26
+ const r = i[s];
27
+ !r || !r.showLabel || r.action.canHideLabel === !1 || (i[s] = {
28
+ ...r,
29
+ showLabel: !1,
30
+ width: A(r.action, !1, n)
31
+ });
32
+ }
33
+ return i;
34
+ }
35
+ function O(t) {
36
+ const { planned: e, availableWidth: n, preOverflow: i, moreButtonWidthPx: s, ignoreKeepVisible: r = !1 } = t, o = [...e], l = [], h = () => {
37
+ let d = -1, c = Number.POSITIVE_INFINITY;
38
+ for (let u = o.length - 1; u >= 0; u -= 1) {
39
+ const v = o[u];
40
+ if (!v || !r && (v.action.keepVisible || v.action.canOverflow === !1)) continue;
41
+ const f = v.action.priority ?? 0;
42
+ f < c && (c = f, d = u);
43
+ }
44
+ return d;
45
+ }, a = () => i.length > 0 || l.length > 0;
46
+ for (; o.length && g(o, a(), s) > n; ) {
47
+ const d = h();
48
+ if (d < 0) break;
49
+ const [c] = o.splice(d, 1);
50
+ c && l.unshift(c.action);
51
+ }
52
+ return {
53
+ inlineActions: o,
54
+ overflowActions: x([...i, ...l])
55
+ };
56
+ }
57
+ function M(t) {
58
+ const { inlineActions: e, overflowActions: n, availableWidth: i, resolveActionWidth: s, allowIconOnlyPromotion: r = !0 } = t, o = n.length === 1 ? n[0] : void 0;
59
+ if (o) {
60
+ const l = (a) => ({
61
+ inlineActions: [...e, {
62
+ action: o,
63
+ showLabel: a,
64
+ width: A(o, a, s)
65
+ }],
66
+ overflowActions: [],
67
+ showMoreMenu: !1
68
+ }), h = (a) => p(l(a).inlineActions) <= i;
69
+ if (h(!0)) return l(!0);
70
+ if (r && o.canHideLabel !== !1 && h(!1)) return l(!1);
71
+ }
72
+ return {
73
+ inlineActions: e,
74
+ overflowActions: n,
75
+ showMoreMenu: n.length >= 1
76
+ };
77
+ }
78
+ function B(t) {
79
+ const { actions: e, availableWidth: n, maxInlineActions: i, collapseLabels: s = !0, resolveActionWidth: r, moreButtonWidthPx: o = 40 } = t, l = w(e), h = i ? l.slice(0, i) : l, a = i ? l.slice(i) : [], d = new Set(h.map((f) => f.id));
80
+ let c = e.filter((f) => !f.hidden && d.has(f.id)).map((f) => ({
81
+ action: f,
82
+ showLabel: !0,
83
+ width: A(f, !0, r)
84
+ }));
85
+ s && (c = N(c, n, r));
86
+ const { inlineActions: u, overflowActions: v } = O({
87
+ planned: c,
88
+ availableWidth: n,
89
+ preOverflow: a,
90
+ moreButtonWidthPx: o
91
+ });
92
+ return M({
93
+ inlineActions: u,
94
+ overflowActions: v,
95
+ availableWidth: n,
96
+ resolveActionWidth: r
97
+ });
98
+ }
99
+ function X(t) {
100
+ const { actions: e, availableWidth: n, maxVisibleBulkActions: i = 3, resolveActionWidth: s, moreButtonWidthPx: r = 40 } = t, o = w(e);
101
+ if (o.length === 0) return {
102
+ inlineActions: [],
103
+ overflowActions: [],
104
+ showMoreMenu: !1
105
+ };
106
+ const l = o.slice(0, i), h = o.slice(i), { inlineActions: a, overflowActions: d } = O({
107
+ planned: l.map((c) => ({
108
+ action: c,
109
+ showLabel: !0,
110
+ width: A(c, !0, s)
111
+ })),
112
+ availableWidth: n,
113
+ preOverflow: h,
114
+ moreButtonWidthPx: r,
115
+ ignoreKeepVisible: !0
116
+ });
117
+ return {
118
+ inlineActions: a,
119
+ overflowActions: d,
120
+ showMoreMenu: d.length >= 1
121
+ };
122
+ }
123
+ export {
124
+ y as ACTION_GAP_PX,
125
+ C as MORE_BUTTON_PX,
126
+ T as estimateToolbarActionWidth,
127
+ X as planBulkToolbarActions,
128
+ B as planToolbarActions,
129
+ A as resolveToolbarActionWidth
130
+ };
@@ -0,0 +1,23 @@
1
+ import { useMemo as t } from "react";
2
+ var r = {
3
+ en: {
4
+ more: "More",
5
+ clearSelection: "Clear selection",
6
+ selected: "selected"
7
+ },
8
+ no: {
9
+ more: "Mer",
10
+ clearSelection: "Fjern valg",
11
+ selected: "valgt"
12
+ }
13
+ };
14
+ function l(e = "en") {
15
+ return t(() => r[e] ?? r.en, [e]);
16
+ }
17
+ function a(e, n) {
18
+ return `${e} ${n.selected}`;
19
+ }
20
+ export {
21
+ a as formatSelectionLabel,
22
+ l as useToolbarTranslations
23
+ };
@@ -1,15 +1,18 @@
1
- import { cn as m } from "../../../../helpers/cn.js";
2
- import { StyledWidgetTitle as l } from "../widget-title/StyledWidgetTitle.js";
3
- import o from "./StyledWidgetHeader.module.js";
1
+ import { cn as l } from "../../../../helpers/cn.js";
2
+ import { StyledWidgetTitle as o } from "../widget-title/StyledWidgetTitle.js";
3
+ import a from "./StyledWidgetHeader.module.js";
4
4
  import "react";
5
- import { jsx as e, jsxs as a } from "react/jsx-runtime";
6
- var h = ({ actions: r, title: d, containerClassname: t, actionsClassname: i }) => /* @__PURE__ */ a("div", {
7
- className: m(o["styled-widget-header"], t),
8
- children: [/* @__PURE__ */ e(l, { children: d }), /* @__PURE__ */ e("div", {
9
- className: i,
10
- children: r
11
- })]
12
- });
5
+ import { jsx as t, jsxs as s } from "react/jsx-runtime";
6
+ var g = ({ actions: d, title: e, containerClassname: i, actionsClassname: m }) => {
7
+ const r = e != null && e !== "";
8
+ return /* @__PURE__ */ s("div", {
9
+ className: l(a["styled-widget-header"], i, !r && d && "!block"),
10
+ children: [r && /* @__PURE__ */ t(o, { children: e }), /* @__PURE__ */ t("div", {
11
+ className: l(m, !r && "w-full"),
12
+ children: d
13
+ })]
14
+ });
15
+ };
13
16
  export {
14
- h as StyledWidgetHeader
17
+ g as StyledWidgetHeader
15
18
  };
@@ -0,0 +1,16 @@
1
+ import { jsx as C, jsxs as t } from "react/jsx-runtime";
2
+ var e = (r) => /* @__PURE__ */ t("svg", {
3
+ xmlns: "http://www.w3.org/2000/svg",
4
+ width: "24",
5
+ height: "24",
6
+ viewBox: "0 0 24 24",
7
+ fill: "none",
8
+ ...r,
9
+ children: [/* @__PURE__ */ C("title", { children: "HubIcon" }), /* @__PURE__ */ C("path", {
10
+ d: "M3.875 22.125C3.29167 21.5417 3 20.8333 3 20C3 19.1667 3.29167 18.4583 3.875 17.875C4.45833 17.2917 5.16667 17 6 17C6.23333 17 6.45 17.025 6.65 17.075C6.85 17.125 7.04167 17.1917 7.225 17.275L8.65 15.5C8.18333 14.9833 7.85833 14.4 7.675 13.75C7.49167 13.1 7.45 12.45 7.55 11.8L5.525 11.125C5.24167 11.5417 4.88333 11.875 4.45 12.125C4.01667 12.375 3.53333 12.5 3 12.5C2.16667 12.5 1.45833 12.2083 0.875 11.625C0.291667 11.0417 0 10.3333 0 9.5C0 8.66667 0.291667 7.95833 0.875 7.375C1.45833 6.79167 2.16667 6.5 3 6.5C3.83333 6.5 4.54167 6.79167 5.125 7.375C5.70833 7.95833 6 8.66667 6 9.5V9.7L8.025 10.4C8.35833 9.8 8.80417 9.29167 9.3625 8.875C9.92083 8.45833 10.55 8.19167 11.25 8.075V5.9C10.6 5.71667 10.0625 5.3625 9.6375 4.8375C9.2125 4.3125 9 3.7 9 3C9 2.16667 9.29167 1.45833 9.875 0.875C10.4583 0.291667 11.1667 0 12 0C12.8333 0 13.5417 0.291667 14.125 0.875C14.7083 1.45833 15 2.16667 15 3C15 3.7 14.7833 4.3125 14.35 4.8375C13.9167 5.3625 13.3833 5.71667 12.75 5.9V8.075C13.45 8.19167 14.0792 8.45833 14.6375 8.875C15.1958 9.29167 15.6417 9.8 15.975 10.4L18 9.7V9.5C18 8.66667 18.2917 7.95833 18.875 7.375C19.4583 6.79167 20.1667 6.5 21 6.5C21.8333 6.5 22.5417 6.79167 23.125 7.375C23.7083 7.95833 24 8.66667 24 9.5C24 10.3333 23.7083 11.0417 23.125 11.625C22.5417 12.2083 21.8333 12.5 21 12.5C20.4667 12.5 19.9792 12.375 19.5375 12.125C19.0958 11.875 18.7417 11.5417 18.475 11.125L16.45 11.8C16.55 12.45 16.5083 13.0958 16.325 13.7375C16.1417 14.3792 15.8167 14.9667 15.35 15.5L16.775 17.25C16.9583 17.1667 17.15 17.1042 17.35 17.0625C17.55 17.0208 17.7667 17 18 17C18.8333 17 19.5417 17.2917 20.125 17.875C20.7083 18.4583 21 19.1667 21 20C21 20.8333 20.7083 21.5417 20.125 22.125C19.5417 22.7083 18.8333 23 18 23C17.1667 23 16.4583 22.7083 15.875 22.125C15.2917 21.5417 15 20.8333 15 20C15 19.6667 15.0542 19.3458 15.1625 19.0375C15.2708 18.7292 15.4167 18.45 15.6 18.2L14.175 16.425C13.4917 16.8083 12.7625 17 11.9875 17C11.2125 17 10.4833 16.8083 9.8 16.425L8.4 18.2C8.58333 18.45 8.72917 18.7292 8.8375 19.0375C8.94583 19.3458 9 19.6667 9 20C9 20.8333 8.70833 21.5417 8.125 22.125C7.54167 22.7083 6.83333 23 6 23C5.16667 23 4.45833 22.7083 3.875 22.125ZM3 10.5C3.28333 10.5 3.52083 10.4042 3.7125 10.2125C3.90417 10.0208 4 9.78333 4 9.5C4 9.21667 3.90417 8.97917 3.7125 8.7875C3.52083 8.59583 3.28333 8.5 3 8.5C2.71667 8.5 2.47917 8.59583 2.2875 8.7875C2.09583 8.97917 2 9.21667 2 9.5C2 9.78333 2.09583 10.0208 2.2875 10.2125C2.47917 10.4042 2.71667 10.5 3 10.5ZM6.7125 20.7125C6.90417 20.5208 7 20.2833 7 20C7 19.7167 6.90417 19.4792 6.7125 19.2875C6.52083 19.0958 6.28333 19 6 19C5.71667 19 5.47917 19.0958 5.2875 19.2875C5.09583 19.4792 5 19.7167 5 20C5 20.2833 5.09583 20.5208 5.2875 20.7125C5.47917 20.9042 5.71667 21 6 21C6.28333 21 6.52083 20.9042 6.7125 20.7125ZM12.7125 3.7125C12.9042 3.52083 13 3.28333 13 3C13 2.71667 12.9042 2.47917 12.7125 2.2875C12.5208 2.09583 12.2833 2 12 2C11.7167 2 11.4792 2.09583 11.2875 2.2875C11.0958 2.47917 11 2.71667 11 3C11 3.28333 11.0958 3.52083 11.2875 3.7125C11.4792 3.90417 11.7167 4 12 4C12.2833 4 12.5208 3.90417 12.7125 3.7125ZM12 15C12.7 15 13.2917 14.7583 13.775 14.275C14.2583 13.7917 14.5 13.2 14.5 12.5C14.5 11.8 14.2583 11.2083 13.775 10.725C13.2917 10.2417 12.7 10 12 10C11.3 10 10.7083 10.2417 10.225 10.725C9.74167 11.2083 9.5 11.8 9.5 12.5C9.5 13.2 9.74167 13.7917 10.225 14.275C10.7083 14.7583 11.3 15 12 15ZM18.7125 20.7125C18.9042 20.5208 19 20.2833 19 20C19 19.7167 18.9042 19.4792 18.7125 19.2875C18.5208 19.0958 18.2833 19 18 19C17.7167 19 17.4792 19.0958 17.2875 19.2875C17.0958 19.4792 17 19.7167 17 20C17 20.2833 17.0958 20.5208 17.2875 20.7125C17.4792 20.9042 17.7167 21 18 21C18.2833 21 18.5208 20.9042 18.7125 20.7125ZM21.7125 10.2125C21.9042 10.0208 22 9.78333 22 9.5C22 9.21667 21.9042 8.97917 21.7125 8.7875C21.5208 8.59583 21.2833 8.5 21 8.5C20.7167 8.5 20.4792 8.59583 20.2875 8.7875C20.0958 8.97917 20 9.21667 20 9.5C20 9.78333 20.0958 10.0208 20.2875 10.2125C20.4792 10.4042 20.7167 10.5 21 10.5C21.2833 10.5 21.5208 10.4042 21.7125 10.2125Z",
11
+ fill: "currentColor"
12
+ })]
13
+ });
14
+ export {
15
+ e as HubIcon
16
+ };
@@ -0,0 +1,16 @@
1
+ import { jsx as C, jsxs as r } from "react/jsx-runtime";
2
+ var i = (l) => /* @__PURE__ */ r("svg", {
3
+ xmlns: "http://www.w3.org/2000/svg",
4
+ width: "24",
5
+ height: "24",
6
+ viewBox: "0 0 24 24",
7
+ fill: "none",
8
+ ...l,
9
+ children: [/* @__PURE__ */ C("title", { children: "HubIconFilled" }), /* @__PURE__ */ C("path", {
10
+ d: "M3.875 22.125C3.29167 21.5417 3 20.8333 3 20C3 19.1667 3.29167 18.4583 3.875 17.875C4.45833 17.2917 5.16667 17 6 17C6.23333 17 6.45 17.025 6.65 17.075C6.85 17.125 7.04167 17.1917 7.225 17.275L8.65 15.5C8.18333 14.9833 7.85833 14.4 7.675 13.75C7.49167 13.1 7.45 12.45 7.55 11.8L5.525 11.125C5.24167 11.5417 4.88333 11.875 4.45 12.125C4.01667 12.375 3.53333 12.5 3 12.5C2.16667 12.5 1.45833 12.2083 0.875 11.625C0.291667 11.0417 0 10.3333 0 9.5C0 8.66667 0.291667 7.95833 0.875 7.375C1.45833 6.79167 2.16667 6.5 3 6.5C3.83333 6.5 4.54167 6.79167 5.125 7.375C5.70833 7.95833 6 8.66667 6 9.5V9.7L8.025 10.4C8.35833 9.8 8.80417 9.29167 9.3625 8.875C9.92083 8.45833 10.55 8.19167 11.25 8.075V5.9C10.6 5.71667 10.0625 5.3625 9.6375 4.8375C9.2125 4.3125 9 3.7 9 3C9 2.16667 9.29167 1.45833 9.875 0.875C10.4583 0.291667 11.1667 0 12 0C12.8333 0 13.5417 0.291667 14.125 0.875C14.7083 1.45833 15 2.16667 15 3C15 3.7 14.7833 4.3125 14.35 4.8375C13.9167 5.3625 13.3833 5.71667 12.75 5.9V8.075C13.45 8.19167 14.0792 8.45833 14.6375 8.875C15.1958 9.29167 15.6417 9.8 15.975 10.4L18 9.7V9.5C18 8.66667 18.2917 7.95833 18.875 7.375C19.4583 6.79167 20.1667 6.5 21 6.5C21.8333 6.5 22.5417 6.79167 23.125 7.375C23.7083 7.95833 24 8.66667 24 9.5C24 10.3333 23.7083 11.0417 23.125 11.625C22.5417 12.2083 21.8333 12.5 21 12.5C20.4667 12.5 19.9792 12.375 19.5375 12.125C19.0958 11.875 18.7417 11.5417 18.475 11.125L16.45 11.8C16.55 12.45 16.5083 13.0958 16.325 13.7375C16.1417 14.3792 15.8167 14.9667 15.35 15.5L16.775 17.25C16.9583 17.1667 17.15 17.1042 17.35 17.0625C17.55 17.0208 17.7667 17 18 17C18.8333 17 19.5417 17.2917 20.125 17.875C20.7083 18.4583 21 19.1667 21 20C21 20.8333 20.7083 21.5417 20.125 22.125C19.5417 22.7083 18.8333 23 18 23C17.1667 23 16.4583 22.7083 15.875 22.125C15.2917 21.5417 15 20.8333 15 20C15 19.6667 15.0542 19.3458 15.1625 19.0375C15.2708 18.7292 15.4167 18.45 15.6 18.2L14.175 16.425C13.4917 16.8083 12.7625 17 11.9875 17C11.2125 17 10.4833 16.8083 9.8 16.425L8.4 18.2C8.58333 18.45 8.72917 18.7292 8.8375 19.0375C8.94583 19.3458 9 19.6667 9 20C9 20.8333 8.70833 21.5417 8.125 22.125C7.54167 22.7083 6.83333 23 6 23C5.16667 23 4.45833 22.7083 3.875 22.125Z",
11
+ fill: "currentColor"
12
+ })]
13
+ });
14
+ export {
15
+ i as HubIconFilled
16
+ };
@@ -0,0 +1,2 @@
1
+ export { HubIcon } from './HubIcon.js'
2
+ export { HubIconFilled } from './HubIconFilled.js'
@@ -167,3 +167,5 @@ export * from './draw-icon.js'
167
167
  export * from './arrow-shrink-icon.js'
168
168
  export * from './indeterminate-icon.js'
169
169
  export * from './manage-search-icon.js'
170
+ export * from './hub-icon.js'
171
+ export * from './widgets-icon.js'
@@ -0,0 +1,16 @@
1
+ import { jsx as t, jsxs as H } from "react/jsx-runtime";
2
+ var e = (r) => /* @__PURE__ */ H("svg", {
3
+ xmlns: "http://www.w3.org/2000/svg",
4
+ width: "20",
5
+ height: "20",
6
+ viewBox: "0 0 20 20",
7
+ fill: "none",
8
+ ...r,
9
+ children: [/* @__PURE__ */ t("title", { children: "WidgetIcon" }), /* @__PURE__ */ t("path", {
10
+ d: "M13.65 11.3L8 5.65L13.65 0L19.3 5.65L13.65 11.3ZM0 9.3V1.3H8V9.3H0ZM10 19.3V11.3H18V19.3H10ZM0 19.3V11.3H8V19.3H0ZM2 7.3H6V3.3H2V7.3ZM13.675 8.5L16.5 5.675L13.675 2.85L10.85 5.675L13.675 8.5ZM12 17.3H16V13.3H12V17.3ZM2 17.3H6V13.3H2V17.3Z",
11
+ fill: "currentColor"
12
+ })]
13
+ });
14
+ export {
15
+ e as WidgetIcon
16
+ };
@@ -0,0 +1,16 @@
1
+ import { jsx as i, jsxs as l } from "react/jsx-runtime";
2
+ var r = (e) => /* @__PURE__ */ l("svg", {
3
+ xmlns: "http://www.w3.org/2000/svg",
4
+ width: "24",
5
+ height: "24",
6
+ viewBox: "0 0 24 24",
7
+ fill: "none",
8
+ ...e,
9
+ children: [/* @__PURE__ */ i("title", { children: "WidgetIconFilled" }), /* @__PURE__ */ i("path", {
10
+ d: "M16.65 13.0002L11 7.3502L16.65 1.7002L22.3 7.3502L16.65 13.0002ZM3 11.0002V3.0002H11V11.0002H3ZM13 21.0002V13.0002H21V21.0002H13ZM3 21.0002V13.0002H11V21.0002H3Z",
11
+ fill: "#1C1B1F"
12
+ })]
13
+ });
14
+ export {
15
+ r as WidgetIconFilled
16
+ };
@@ -0,0 +1,2 @@
1
+ export { WidgetIcon } from './WidgetIcon.js'
2
+ export { WidgetIconFilled } from './WidgetIconFilled.js'
@@ -1,21 +1,25 @@
1
- import { FilterIcon as m } from "../../icons/filter-icon/FilterIcon.js";
2
- import { StyledButton as n } from "../../inputs/button/StyledButton.js";
3
- import d from "clsx";
1
+ import { FilterIcon as d } from "../../icons/filter-icon/FilterIcon.js";
2
+ import { StyledButton as m } from "../../inputs/button/StyledButton.js";
3
+ import { useDynamicToolbarLayout as c } from "../../custom/module/header-layout/DynamicToolbarLayoutContext.js";
4
+ import s from "clsx";
4
5
  import { Fragment as g, jsx as r, jsxs as h } from "react/jsx-runtime";
5
- var u = ({ filterIsActive: e, label: l, hideLabel: o = !1, size: t = "large", variant: i = "outlined", ...a }) => /* @__PURE__ */ r(g, { children: /* @__PURE__ */ h("div", {
6
- className: "relative h-fit w-fit",
7
- children: [/* @__PURE__ */ r(n, {
8
- ...a,
9
- type: "button",
10
- startIcon: /* @__PURE__ */ r(m, {
11
- width: t === "large" ? 24 : 20,
12
- height: t === "large" ? 24 : 20
13
- }),
14
- variant: i,
15
- size: t,
16
- children: !o && (l ?? "Filter")
17
- }), e && /* @__PURE__ */ r("div", { className: d("absolute h-2 w-2 rounded-full bg-gama-400", t === "large" ? "right-2 top-2" : "right-1 top-1") })]
18
- }) });
6
+ var x = ({ filterIsActive: e, label: o, hideLabel: l, size: t = "large", variant: i = "outlined", ...a }) => {
7
+ const { filterIconOnly: n } = c();
8
+ return /* @__PURE__ */ r(g, { children: /* @__PURE__ */ h("div", {
9
+ className: "relative h-fit w-fit",
10
+ children: [/* @__PURE__ */ r(m, {
11
+ ...a,
12
+ type: "button",
13
+ startIcon: /* @__PURE__ */ r(d, {
14
+ width: t === "large" ? 24 : 20,
15
+ height: t === "large" ? 24 : 20
16
+ }),
17
+ variant: i,
18
+ size: t,
19
+ children: !(l ?? n) && (o ?? "Filter")
20
+ }), e && /* @__PURE__ */ r("div", { className: s("absolute h-2 w-2 rounded-full bg-gama-400", t === "large" ? "right-2 top-2" : "right-1 top-1") })]
21
+ }) });
22
+ };
19
23
  export {
20
- u as StyledFilterButton
24
+ x as StyledFilterButton
21
25
  };
@@ -1,11 +1,12 @@
1
- import { FilterIcon as p } from "../../icons/filter-icon/FilterIcon.js";
2
- import { StyledButton as A } from "../../inputs/button/StyledButton.js";
3
- import { StyledPopover as O } from "../popover/StyledPopover.js";
4
- import v from "clsx";
5
- import h, { useState as E } from "react";
6
- import { Fragment as b, jsx as e, jsxs as d } from "react/jsx-runtime";
7
- var k = () => {
8
- const [r, t] = E(null), c = (o) => {
1
+ import { FilterIcon as O } from "../../icons/filter-icon/FilterIcon.js";
2
+ import { StyledButton as b } from "../../inputs/button/StyledButton.js";
3
+ import { StyledPopover as v } from "../popover/StyledPopover.js";
4
+ import { useDynamicToolbarLayout as E } from "../../custom/module/header-layout/DynamicToolbarLayoutContext.js";
5
+ import k from "clsx";
6
+ import m, { useState as C } from "react";
7
+ import { Fragment as F, jsx as e, jsxs as g } from "react/jsx-runtime";
8
+ var x = () => {
9
+ const [r, t] = C(null), c = (o) => {
9
10
  t(() => o.currentTarget);
10
11
  }, l = () => {
11
12
  t(() => null);
@@ -17,28 +18,28 @@ var k = () => {
17
18
  r ? l() : c(o);
18
19
  }
19
20
  };
20
- }, C = (r) => h.isValidElement(r) || typeof r == "string" || typeof r == "number" || r === null || Array.isArray(r), I = ({ filterIsActive: r, popoverContent: t, dataTest: c, disabled: l, size: n = "large", variant: o = "outlined", popoverProps: a, anchorNode: m, label: f, hideLabel: y }) => {
21
- const { onAnchorClick: g, onClose: s, anchorEl: i } = k(), u = m?.({
21
+ }, N = (r) => m.isValidElement(r) || typeof r == "string" || typeof r == "number" || r === null || Array.isArray(r), V = ({ filterIsActive: r, popoverContent: t, dataTest: c, disabled: l, size: n = "large", variant: o = "outlined", popoverProps: a, anchorNode: h, label: f, hideLabel: y }) => {
22
+ const { onAnchorClick: u, onClose: s, anchorEl: i } = x(), { filterIconOnly: p } = E(), A = y ?? p, d = h?.({
22
23
  isOpen: !!i,
23
24
  onClose: s
24
25
  });
25
- return /* @__PURE__ */ d(b, { children: [/* @__PURE__ */ d("div", {
26
+ return /* @__PURE__ */ g(F, { children: [/* @__PURE__ */ g("div", {
26
27
  className: "relative h-fit w-fit",
27
- children: [m && h.isValidElement(u) ? h.cloneElement(u, { onClick: g }) : /* @__PURE__ */ e(A, {
28
+ children: [h && m.isValidElement(d) ? m.cloneElement(d, { onClick: u }) : /* @__PURE__ */ e(b, {
28
29
  type: "button",
29
30
  disabled: l,
30
31
  variant: o,
31
- startIcon: /* @__PURE__ */ e(p, {
32
+ startIcon: /* @__PURE__ */ e(O, {
32
33
  width: n === "large" ? 24 : 20,
33
34
  height: n === "large" ? 24 : 20
34
35
  }),
35
- onClick: g,
36
+ onClick: u,
36
37
  size: n,
37
38
  dataTest: c,
38
39
  "data-popover-open": !!i || void 0,
39
- children: !y && (f ?? "Filter")
40
- }), r && /* @__PURE__ */ e("div", { className: v("absolute h-2 w-2 rounded-full bg-gama-400", n === "large" ? "right-2 top-2" : "right-1 top-1") })]
41
- }), /* @__PURE__ */ e(O, {
40
+ children: !A && (f ?? "Filter")
41
+ }), r && /* @__PURE__ */ e("div", { className: k("absolute h-2 w-2 rounded-full bg-gama-400", n === "large" ? "right-2 top-2" : "right-1 top-1") })]
42
+ }), /* @__PURE__ */ e(v, {
42
43
  ...a,
43
44
  open: !!i,
44
45
  anchorEl: i,
@@ -52,12 +53,12 @@ var k = () => {
52
53
  horizontal: "right"
53
54
  },
54
55
  className: a?.className ?? "my-1",
55
- children: C(t) ? t : t({
56
+ children: N(t) ? t : t({
56
57
  isOpen: !!i,
57
58
  onClose: s
58
59
  })
59
60
  })] });
60
61
  };
61
62
  export {
62
- I as StyledFilterMenu
63
+ V as StyledFilterMenu
63
64
  };
@@ -0,0 +1,26 @@
1
+ import { useLayoutEffect as a, useRef as d, useState as l } from "react";
2
+ function h() {
3
+ const n = d(null), [s, m] = l(0);
4
+ return a(() => {
5
+ const e = n.current;
6
+ if (!e) return;
7
+ let t = 0;
8
+ const r = () => {
9
+ const c = Math.round(e.getBoundingClientRect().width);
10
+ m((i) => i === c ? i : c);
11
+ }, u = () => {
12
+ cancelAnimationFrame(t), t = requestAnimationFrame(r);
13
+ };
14
+ r();
15
+ const o = new ResizeObserver(u);
16
+ return o.observe(e), () => {
17
+ cancelAnimationFrame(t), o.disconnect();
18
+ };
19
+ }, []), {
20
+ ref: n,
21
+ widthPx: s
22
+ };
23
+ }
24
+ export {
25
+ h as useElementWidthPx
26
+ };
@@ -0,0 +1,37 @@
1
+ import { useCallback as g, useEffect as m, useRef as i, useState as p } from "react";
2
+ function M() {
3
+ const [h, R] = p({}), s = i(/* @__PURE__ */ new Map()), f = i(/* @__PURE__ */ new Map()), b = i(/* @__PURE__ */ new Map()), o = i(null), u = g((e) => {
4
+ const t = s.current.get(e);
5
+ if (!t) return;
6
+ const r = t.mode === "scroll" ? t.element.scrollWidth : t.element.getBoundingClientRect().width, c = Math.ceil(r);
7
+ R((n) => n[e] === c ? n : {
8
+ ...n,
9
+ [e]: c
10
+ });
11
+ }, []), a = g(() => (o.current ??= new ResizeObserver((e) => {
12
+ for (const { target: t } of e) {
13
+ const r = f.current.get(t);
14
+ r && u(r);
15
+ }
16
+ }), o.current), [u]), w = g((e, t = "box") => {
17
+ const r = `${e}|${t}`, c = b.current.get(r);
18
+ if (c) return c;
19
+ const n = (l) => {
20
+ const d = s.current.get(e);
21
+ d && (a().unobserve(d.element), f.current.delete(d.element), s.current.delete(e)), l && (s.current.set(e, {
22
+ element: l,
23
+ mode: t
24
+ }), f.current.set(l, e), a().observe(l), u(e));
25
+ };
26
+ return b.current.set(r, n), n;
27
+ }, [a, u]);
28
+ return m(() => () => {
29
+ o.current?.disconnect(), o.current = null;
30
+ }, []), {
31
+ register: w,
32
+ widths: h
33
+ };
34
+ }
35
+ export {
36
+ M as useWidthRegistry
37
+ };