@kong-ui-public/page-layout 1.3.10 → 1.3.11-pr.4063.bf809a10e.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 (4) hide show
  1. package/dist/page-layout.es.js +681 -796
  2. package/dist/page-layout.umd.js +1 -1
  3. package/dist/style.css +2 -1
  4. package/package.json +3 -3
package/dist/page-layout.es.js CHANGED
@@ -1,811 +1,696 @@
1
- import { onMounted as we, nextTick as be, shallowRef as me, shallowReadonly as je, getCurrentScope as Ge, onScopeDispose as Ye, getCurrentInstance as Oe, toValue as ve, computed as w, watch as fe, defineComponent as ke, inject as de, useTemplateRef as he, ref as W, onBeforeUnmount as xe, resolveComponent as B, openBlock as r, createElementBlock as f, createElementVNode as $, normalizeClass as j, Fragment as Z, renderList as G, createBlock as D, resolveDynamicComponent as Ie, mergeProps as ze, withKeys as Fe, withModifiers as ye, withCtx as I, renderSlot as R, createTextVNode as oe, toDisplayString as x, createVNode as z, unref as m, createCommentVNode as k, useCssVars as qe, useSlots as Xe, provide as Ze, onUnmounted as Je, createSlots as Ae, normalizeProps as Qe, guardReactiveProps as et } from "vue";
2
- import { useRouter as He, useRoute as tt } from "vue-router";
3
- import { createI18n as at, i18nTComponent as ot } from "@kong-ui-public/i18n";
4
- import { ChevronDownIcon as We, ChevronRightIcon as nt, ArrowTopLeftIcon as st, StarFillIcon as it, StarIcon as lt, InfoIcon as rt } from "@kong/icons";
5
- const ut = "Go back", ct = { save_shortcut: "Save page to shortcuts", remove_shortcut: "Remove page from shortcuts" }, dt = { more_button: { label: "More", aria_label: "More tabs" } }, vt = { aria_label: "Page sections", more_button: { aria_label: "More page sections" } }, ht = {
6
- back_button: ut,
7
- favorite_button: ct,
8
- tabs: dt,
9
- anchor_navigation: vt
1
+ import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createSlots as o, createTextVNode as s, createVNode as c, defineComponent as l, getCurrentInstance as u, getCurrentScope as d, guardReactiveProps as f, inject as p, mergeProps as m, nextTick as h, normalizeClass as g, normalizeProps as _, onBeforeUnmount as v, onMounted as y, onScopeDispose as b, onUnmounted as x, openBlock as S, provide as C, ref as w, renderList as T, renderSlot as E, resolveComponent as D, resolveDynamicComponent as ee, shallowReadonly as O, shallowRef as k, toDisplayString as A, toValue as j, unref as M, useCssVars as N, useSlots as te, useTemplateRef as P, watch as F, withCtx as I, withKeys as ne, withModifiers as L } from "vue";
2
+ import { useRoute as R, useRouter as z } from "vue-router";
3
+ import { createI18n as B, i18nTComponent as V } from "@kong-ui-public/i18n";
4
+ import { ArrowTopLeftIcon as re, ChevronDownIcon as H, ChevronRightIcon as ie, InfoIcon as U, StarFillIcon as ae, StarIcon as oe } from "@kong/icons";
5
+ var W = {
6
+ back_button: "Go back",
7
+ favorite_button: {
8
+ save_shortcut: "Save page to shortcuts",
9
+ remove_shortcut: "Remove page from shortcuts"
10
+ },
11
+ tabs: { more_button: {
12
+ label: "More",
13
+ aria_label: "More tabs"
14
+ } },
15
+ anchor_navigation: {
16
+ aria_label: "Page sections",
17
+ more_button: { aria_label: "More page sections" }
18
+ }
10
19
  };
11
- function ft() {
12
- const e = at("en-us", ht);
13
- return {
14
- i18n: e,
15
- i18nT: ot(e)
16
- // Translation component <i18n-t>
17
- };
20
+ // src/composables/useI18n.ts
21
+ function se() {
22
+ let e = B("en-us", W);
23
+ return {
24
+ i18n: e,
25
+ i18nT: V(e)
26
+ };
18
27
  }
19
- const Se = {
20
- useI18n: ft
21
- }, pt = "12px", ne = "16px", gt = "2px", Re = "16px";
22
- function bt(e, l) {
23
- return Ge() ? (Ye(e, l), !0) : !1;
28
+ // src/composables/index.ts
29
+ var ce = { useI18n: se }, G = "12px", K = "16px", le = "16px";
30
+ // ../../../node_modules/.pnpm/@vueuse+shared@14.4.0_vue@3.5.45_typescript@5.9.3_/node_modules/@vueuse/shared/dist/index.js
31
+ function ue(e, t) {
32
+ return d() ? (b(e, t), !0) : !1;
24
33
  }
25
- const mt = typeof window < "u" && typeof document < "u";
34
+ var q = typeof window < "u" && typeof document < "u";
26
35
  typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
27
- const te = () => {
28
- };
29
- function yt(e, l) {
30
- function a(...o) {
31
- return new Promise((u, v) => {
32
- Promise.resolve(e(() => l.apply(this, o), {
33
- fn: l,
34
- thisArg: this,
35
- args: o
36
- })).then(u).catch(v);
37
- });
38
- }
39
- return "cancel" in e && Object.assign(a, {
40
- cancel: e.cancel,
41
- flush: e.flush,
42
- isPending: e.isPending
43
- }), a;
36
+ var J = () => {};
37
+ function Y(e, t) {
38
+ function n(...n) {
39
+ return new Promise((r, i) => {
40
+ Promise.resolve(e(() => t.apply(this, n), {
41
+ fn: t,
42
+ thisArg: this,
43
+ args: n
44
+ })).then(r).catch(i);
45
+ });
46
+ }
47
+ return "cancel" in e && Object.assign(n, {
48
+ cancel: e.cancel,
49
+ flush: e.flush,
50
+ isPending: e.isPending
51
+ }), n;
44
52
  }
45
- function wt(e, l = {}) {
46
- let a, o, u = te, v = te;
47
- const d = me(!1), n = (g) => {
48
- clearTimeout(g), u(), u = te;
49
- };
50
- let y;
51
- return Object.assign((g) => {
52
- const i = ve(e), h = ve(l.maxWait);
53
- return a && n(a), i <= 0 || h !== void 0 && h <= 0 ? (o && (n(o), o = void 0), d.value = !1, Promise.resolve(g())) : (d.value = !0, new Promise((b, p) => {
54
- u = l.rejectOnCancel ? p : b, v = b, y = g, h && !o && (o = setTimeout(() => {
55
- a && n(a), o = void 0, d.value = !1, b(y());
56
- }, h)), a = setTimeout(() => {
57
- o && n(o), o = void 0, d.value = !1, b(g());
58
- }, i);
59
- }));
60
- }, {
61
- cancel: () => {
62
- a && (n(a), a = void 0), o && (n(o), o = void 0), d.value = !1, v = te;
63
- },
64
- flush: () => {
65
- if (d.value) {
66
- a && (clearTimeout(a), a = void 0), o && (clearTimeout(o), o = void 0), d.value = !1;
67
- const g = v;
68
- u = te, v = te, g(y());
69
- }
70
- },
71
- isPending: je(d)
72
- });
53
+ function X(e, t = {}) {
54
+ let n, r, i = J, a = J, o = k(!1), s = (e) => {
55
+ clearTimeout(e), i(), i = J;
56
+ }, c;
57
+ return Object.assign((l) => {
58
+ let u = j(e), d = j(t.maxWait);
59
+ return n && s(n), u <= 0 || d !== void 0 && d <= 0 ? (r &&= (s(r), void 0), o.value = !1, Promise.resolve(l())) : (o.value = !0, new Promise((e, f) => {
60
+ i = t.rejectOnCancel ? f : e, a = e, c = l, d && !r && (r = setTimeout(() => {
61
+ n && s(n), r = void 0, o.value = !1, e(c());
62
+ }, d)), n = setTimeout(() => {
63
+ r && s(r), r = void 0, o.value = !1, e(l());
64
+ }, u);
65
+ }));
66
+ }, {
67
+ cancel: () => {
68
+ n &&= (s(n), void 0), r &&= (s(r), void 0), o.value = !1, a = J;
69
+ },
70
+ flush: () => {
71
+ if (o.value) {
72
+ n &&= (clearTimeout(n), void 0), r &&= (clearTimeout(r), void 0), o.value = !1;
73
+ let e = a;
74
+ i = J, a = J, e(c());
75
+ }
76
+ },
77
+ isPending: O(o)
78
+ });
73
79
  }
74
- function kt(e) {
75
- return Array.isArray(e) ? e : [e];
80
+ function Z(e) {
81
+ return Array.isArray(e) ? e : [e];
76
82
  }
77
- function Tt(e) {
78
- return Oe();
83
+ function Q(e) {
84
+ return e || u();
79
85
  }
80
- function _t(e, l = 200, a = {}) {
81
- return yt(wt(l, a), e);
86
+ function de(e, t = 200, n = {}) {
87
+ return Y(X(t, n), e);
82
88
  }
83
- function $t(e, l = !0, a) {
84
- Tt() ? we(e, a) : l ? e() : be(e);
89
+ function fe(e, t = !0, n) {
90
+ Q(n) ? y(e, n) : t ? e() : h(e);
85
91
  }
86
- const Me = mt ? window : void 0;
87
- function ae(e) {
88
- var l;
89
- const a = ve(e);
90
- return (l = a?.$el) !== null && l !== void 0 ? l : a;
92
+ // ../../../node_modules/.pnpm/@vueuse+core@14.4.0_vue@3.5.45_typescript@5.9.3_/node_modules/@vueuse/core/dist/index.js
93
+ var pe = q ? window : void 0;
94
+ q && window.document, q && window.navigator, q && window.location;
95
+ function $(e) {
96
+ let t = j(e);
97
+ return t?.$el ?? t;
91
98
  }
92
- // @__NO_SIDE_EFFECTS__
93
- function Ct() {
94
- const e = me(!1), l = Oe();
95
- return l && we(() => {
96
- e.value = !0;
97
- }, l), e;
99
+ function me() {
100
+ let e = k(!1), t = u();
101
+ return t && y(() => {
102
+ e.value = !0;
103
+ }, t), e;
98
104
  }
99
- // @__NO_SIDE_EFFECTS__
100
- function Et(e) {
101
- const l = /* @__PURE__ */ Ct();
102
- return w(() => (l.value, !!e()));
105
+ /* @__NO_SIDE_EFFECTS__ */
106
+ function he(e) {
107
+ let n = me();
108
+ return t(() => (n.value, !!e()));
103
109
  }
104
- function Le(e, l, a = {}) {
105
- const { window: o = Me, ...u } = a;
106
- let v;
107
- const d = /* @__PURE__ */ Et(() => o && "ResizeObserver" in o), n = () => {
108
- v && (v.disconnect(), v = void 0);
109
- }, y = fe(w(() => {
110
- const g = ve(e);
111
- return Array.isArray(g) ? g.map((i) => ae(i)) : [ae(g)];
112
- }), (g) => {
113
- if (n(), d.value && o) {
114
- v = new ResizeObserver(l);
115
- for (const i of g) i && v.observe(i, u);
116
- }
117
- }, {
118
- immediate: !0,
119
- flush: "post"
120
- }), A = () => {
121
- n(), y();
122
- };
123
- return bt(A), {
124
- isSupported: d,
125
- stop: A
126
- };
110
+ function ge(e, n, r = {}) {
111
+ let { window: i = pe, ...a } = r, o, s = /* @__PURE__ */ he(() => i && "ResizeObserver" in i), c = () => {
112
+ o &&= (o.disconnect(), void 0);
113
+ }, l = F(t(() => {
114
+ let t = j(e);
115
+ return Array.isArray(t) ? t.map((e) => $(e)) : [$(t)];
116
+ }), (e) => {
117
+ if (c(), s.value && i) {
118
+ o = new ResizeObserver(n);
119
+ for (let t of e) t && o.observe(t, a);
120
+ }
121
+ }, {
122
+ immediate: !0,
123
+ flush: "post"
124
+ }), u = () => {
125
+ c(), l();
126
+ };
127
+ return ue(u), {
128
+ isSupported: s,
129
+ stop: u
130
+ };
127
131
  }
128
- function It(e, l = {
129
- width: 0,
130
- height: 0
131
- }, a = {}) {
132
- const { window: o = Me, box: u = "content-box" } = a, v = w(() => {
133
- var i;
134
- return (i = ae(e)) === null || i === void 0 || (i = i.namespaceURI) === null || i === void 0 ? void 0 : i.includes("svg");
135
- }), d = me(l.width), n = me(l.height), { stop: y } = Le(e, ([i]) => {
136
- const h = u === "border-box" ? i.borderBoxSize : u === "content-box" ? i.contentBoxSize : i.devicePixelContentBoxSize;
137
- if (o && v.value) {
138
- const b = ae(e);
139
- if (b) {
140
- const p = b.getBoundingClientRect();
141
- d.value = p.width, n.value = p.height;
142
- }
143
- } else if (h) {
144
- const b = kt(h);
145
- d.value = b.reduce((p, { inlineSize: S }) => p + S, 0), n.value = b.reduce((p, { blockSize: S }) => p + S, 0);
146
- } else
147
- d.value = i.contentRect.width, n.value = i.contentRect.height;
148
- }, a);
149
- $t(() => {
150
- const i = ae(e);
151
- if (i && "offsetWidth" in i) if (u === "content-box" && o) {
152
- const h = o.getComputedStyle(i), b = Number.parseFloat(h.paddingLeft) + Number.parseFloat(h.paddingRight), p = Number.parseFloat(h.paddingTop) + Number.parseFloat(h.paddingBottom), S = Number.parseFloat(h.borderLeftWidth) + Number.parseFloat(h.borderRightWidth), P = Number.parseFloat(h.borderTopWidth) + Number.parseFloat(h.borderBottomWidth);
153
- d.value = i.offsetWidth - b - S, n.value = i.offsetHeight - p - P;
154
- } else
155
- d.value = i.offsetWidth, n.value = i.offsetHeight;
156
- else i && (d.value = l.width, n.value = l.height);
157
- });
158
- const A = fe(() => ae(e), (i) => {
159
- d.value = i ? l.width : 0, n.value = i ? l.height : 0;
160
- });
161
- function g() {
162
- y(), A();
163
- }
164
- return {
165
- width: d,
166
- height: n,
167
- stop: g
168
- };
132
+ function _e(e, n = {
133
+ width: 0,
134
+ height: 0
135
+ }, r = {}) {
136
+ let { window: i = pe, box: a = "content-box" } = r, o = t(() => {
137
+ var t;
138
+ return (t = $(e)) == null || (t = t.namespaceURI) == null ? void 0 : t.includes("svg");
139
+ }), s = k(n.width), c = k(n.height), { stop: l } = ge(e, ([t]) => {
140
+ let n = a === "border-box" ? t.borderBoxSize : a === "content-box" ? t.contentBoxSize : t.devicePixelContentBoxSize;
141
+ if (i && o.value) {
142
+ let t = $(e);
143
+ if (t) {
144
+ let e = t.getBoundingClientRect();
145
+ s.value = e.width, c.value = e.height;
146
+ }
147
+ } else if (n) {
148
+ let e = Z(n);
149
+ s.value = e.reduce((e, { inlineSize: t }) => e + t, 0), c.value = e.reduce((e, { blockSize: t }) => e + t, 0);
150
+ } else s.value = t.contentRect.width, c.value = t.contentRect.height;
151
+ }, r);
152
+ fe(() => {
153
+ let t = $(e);
154
+ if (t && "offsetWidth" in t) {
155
+ if (a === "content-box" && i) {
156
+ let e = i.getComputedStyle(t), n = Number.parseFloat(e.paddingLeft) + Number.parseFloat(e.paddingRight), r = Number.parseFloat(e.paddingTop) + Number.parseFloat(e.paddingBottom), a = Number.parseFloat(e.borderLeftWidth) + Number.parseFloat(e.borderRightWidth), o = Number.parseFloat(e.borderTopWidth) + Number.parseFloat(e.borderBottomWidth);
157
+ s.value = t.offsetWidth - n - a, c.value = t.offsetHeight - r - o;
158
+ } else s.value = t.offsetWidth, c.value = t.offsetHeight;
159
+ } else t && (s.value = n.width, c.value = n.height);
160
+ });
161
+ let u = F(() => $(e), (e) => {
162
+ s.value = e ? n.width : 0, c.value = e ? n.height : 0;
163
+ });
164
+ function d() {
165
+ l(), u();
166
+ }
167
+ return {
168
+ width: s,
169
+ height: c,
170
+ stop: d
171
+ };
169
172
  }
170
- const At = {
171
- ref: "page-layout-tabs",
172
- class: "page-layout-tabs",
173
- "data-testid": "page-layout-tabs"
174
- }, St = { key: 0 }, Rt = ["aria-label"], Lt = {
175
- key: 0,
176
- class: "layout-loader-container"
177
- }, Nt = /* @__PURE__ */ ke({
178
- __name: "PageLayoutTabs",
179
- props: {
180
- tabs: { default: () => [] }
181
- },
182
- setup(e) {
183
- const { i18n: { t: l } } = Se.useI18n(), a = He(), o = de("app:navigateTo", null), u = (p) => {
184
- if (typeof p.to != "string") {
185
- a.push(p.to);
186
- return;
187
- }
188
- if (typeof o != "function") {
189
- window.location.href = p.to;
190
- return;
191
- }
192
- o(p.to);
193
- }, v = he("page-layout-tabs"), d = he("page-layout-tabs-list"), n = W(e.tabs.length), y = W(!1), A = w(() => e.tabs.slice(0, n.value)), g = w(() => e.tabs.slice(n.value)), i = async () => {
194
- if (!v.value || !d.value)
195
- return;
196
- y.value = !1, n.value = e.tabs.length, await be();
197
- const p = v.value?.getBoundingClientRect().width - parseInt(Re) * 2;
198
- let S = d.value?.getBoundingClientRect().width;
199
- if (!p || !S) {
200
- y.value = !0;
201
- return;
202
- }
203
- const P = 50;
204
- for (; S + P > p && n.value > 1; )
205
- n.value--, await be(), S = d.value?.getBoundingClientRect().width || 0;
206
- y.value = !0;
207
- };
208
- let h = null;
209
- const b = () => {
210
- h && clearTimeout(h), h = setTimeout(() => {
211
- i();
212
- }, 150);
213
- };
214
- return we(() => {
215
- i(), Le(v, b);
216
- }), xe(() => {
217
- h && clearTimeout(h);
218
- }), fe(() => e.tabs, () => {
219
- i();
220
- }, { deep: !0 }), (p, S) => {
221
- const P = B("KDropdownItem"), J = B("KDropdown"), se = B("KSkeletonBox");
222
- return r(), f("nav", At, [
223
- $("ul", {
224
- ref: "page-layout-tabs-list",
225
- class: j({ "layout-computing": !y.value })
226
- }, [
227
- (r(!0), f(Z, null, G(A.value, (c) => (r(), f("li", {
228
- key: `${c.key}-tab`
229
- }, [
230
- (r(), D(Ie(typeof c.to == "string" ? "a" : "router-link"), ze({ ref_for: !0 }, typeof c.to == "string" ? { href: c.to } : { to: c.to }, {
231
- "aria-current": c.active ? "page" : void 0,
232
- class: ["tab-link", { active: c.active }],
233
- "data-testid": c.dataTestId ? c.dataTestId : `page-layout-tab-${c.key}`,
234
- tabindex: "0",
235
- onClick: ye((F) => u(c), ["prevent"]),
236
- onKeydown: Fe(ye((F) => u(c), ["prevent"]), ["enter"])
237
- }), {
238
- default: I(() => [
239
- R(p.$slots, `tab-${c.key}`, { tab: c }, () => [
240
- oe(x(c.label), 1)
241
- ], !0)
242
- ]),
243
- _: 2
244
- }, 1040, ["aria-current", "class", "data-testid", "onClick", "onKeydown"]))
245
- ]))), 128)),
246
- e.tabs.length > n.value ? (r(), f("li", St, [
247
- z(J, { "kpop-attributes": {
248
- placement: "bottom-end",
249
- popoverElementAttributes: { "data-testid": "tabs-overflow-dropdown-popover" }
250
- } }, {
251
- items: I(() => [
252
- (r(!0), f(Z, null, G(g.value, (c) => (r(), D(P, {
253
- key: `${c.key}-dropdown-item`,
254
- "aria-current": c.active ? "page" : void 0,
255
- "data-testid": c.dataTestId ? c.dataTestId : `page-layout-tab-${c.key}`,
256
- item: {
257
- label: c.label,
258
- value: c.key,
259
- to: c.to
260
- },
261
- selected: c.active
262
- }, {
263
- default: I(() => [
264
- R(p.$slots, `tab-${c.key}`, { tab: c }, () => [
265
- oe(x(c.label), 1)
266
- ], !0)
267
- ]),
268
- _: 2
269
- }, 1032, ["aria-current", "data-testid", "item", "selected"]))), 128))
270
- ]),
271
- default: I(() => [
272
- $("button", {
273
- "aria-label": m(l)("tabs.more_button.aria_label"),
274
- class: j(["tab-link", { active: g.value.find((c) => c.active) }]),
275
- "data-testid": "tabs-overflow-dropdown-button"
276
- }, [
277
- oe(x(m(l)("tabs.more_button.label")) + " ", 1),
278
- z(m(We), {
279
- decorative: "",
280
- size: `var(--kui-icon-size-30, ${m(ne)})`
281
- }, null, 8, ["size"])
282
- ], 10, Rt)
283
- ]),
284
- _: 3
285
- })
286
- ])) : k("", !0)
287
- ], 2),
288
- y.value ? k("", !0) : (r(), f("div", Lt, [
289
- (r(), f(Z, null, G(3, (c) => z(se, {
290
- key: `layout-loader-${c}`,
291
- height: "1",
292
- width: "5"
293
- })), 64))
294
- ]))
295
- ], 512);
296
- };
297
- }
298
- }), Te = (e, l) => {
299
- const a = e.__vccOpts || e;
300
- for (const [o, u] of l)
301
- a[o] = u;
302
- return a;
303
- }, Dt = /* @__PURE__ */ Te(Nt, [["__scopeId", "data-v-02891bc1"]]), Bt = ["aria-label", "data-fit"], Pt = {
304
- key: 0,
305
- "aria-hidden": "true",
306
- class: "anchor-ellipsis",
307
- "data-testid": "anchor-navigation-leading-ellipsis"
308
- }, Kt = ["aria-current", "data-testid", "title", "onClick"], Ot = {
309
- key: 1,
310
- "aria-hidden": "true",
311
- class: "anchor-ellipsis",
312
- "data-testid": "anchor-navigation-trailing-ellipsis"
313
- }, xt = { key: 2 }, Be = 140, Pe = 22, Ee = 16, ce = "data-anchor-attention", zt = 1200, Ft = 1600, Ht = /* @__PURE__ */ ke({
314
- __name: "PageLayoutAnchorNavigation",
315
- props: {
316
- anchors: { default: () => [] }
317
- },
318
- setup(e) {
319
- const { i18n: { t: l } } = Se.useI18n(), a = he("page-layout-anchor-navigation"), o = he("page-layout-anchor-navigation-list"), u = W("all"), v = W(""), d = W([]), n = w(() => e.anchors.filter((t) => d.value.includes(t.id))), y = w(() => {
320
- const t = n.value.findIndex((s) => s.id === v.value);
321
- return t === -1 ? 0 : t;
322
- }), A = w(() => {
323
- const t = n.value, s = t.length, T = y.value;
324
- if (u.value === "all")
325
- return { anchors: t, hasLeadingEllipsis: !1, hasTrailingEllipsis: !1, hasOverflowDropdown: !1 };
326
- if (u.value === "hidden")
327
- return { anchors: [], hasLeadingEllipsis: !1, hasTrailingEllipsis: !1, hasOverflowDropdown: !1 };
328
- if (u.value === "active-only")
329
- return { anchors: t.slice(T, T + 1), hasLeadingEllipsis: !1, hasTrailingEllipsis: !1, hasOverflowDropdown: !0 };
330
- const C = u.value === "window-3" ? 3 : 2;
331
- if (s <= C)
332
- return { anchors: t, hasLeadingEllipsis: !1, hasTrailingEllipsis: !1, hasOverflowDropdown: !0 };
333
- const K = T < C ? 0 : T >= s - C ? s - C : T - 1;
334
- return {
335
- anchors: t.slice(K, K + C),
336
- hasLeadingEllipsis: K > 0,
337
- hasTrailingEllipsis: K + C < s,
338
- hasOverflowDropdown: !0
339
- };
340
- }), g = (t) => t.dataTestId ?? `page-layout-anchor-${t.id.replace(/[^\w-]+/g, "-").replace(/^-+|-+$/g, "")}`, i = W(null), h = () => {
341
- let t = a.value?.parentElement ?? null;
342
- for (; t; ) {
343
- const { overflowY: s } = getComputedStyle(t);
344
- if (s === "auto" || s === "scroll" || s === "overlay")
345
- return t;
346
- t = t.parentElement;
347
- }
348
- return null;
349
- }, b = (t) => {
350
- if (t.element)
351
- return t.element.isConnected ? t.element : null;
352
- const s = i.value ?? document;
353
- try {
354
- return s.querySelector(t.id) ?? s.querySelector(`#${CSS.escape(t.id)}`);
355
- } catch {
356
- return null;
357
- }
358
- }, p = () => (a.value?.closest(".page-layout-header")?.getBoundingClientRect().height ?? 0) + parseInt(Re, 10), S = parseInt(ne, 10), P = parseInt(gt, 10), J = (t) => t * Be + 2 * S + Pe + (t + 2) * P + Ee, se = () => Be + Pe + P + Ee;
359
- let c = 0;
360
- const F = async () => {
361
- if (!n.value.length) {
362
- u.value = "hidden";
363
- return;
364
- }
365
- const t = ++c;
366
- if (u.value = "all", await be(), t !== c || !a.value || !o.value)
367
- return;
368
- const s = a.value.getBoundingClientRect().width, T = o.value.getBoundingClientRect().width;
369
- s <= 0 || T <= 0 || T + Ee <= s || (J(3) <= s ? u.value = "window-3" : J(2) <= s ? u.value = "window-2" : se() <= s ? u.value = "active-only" : u.value = "hidden");
370
- };
371
- let M = null;
372
- Le(a, () => {
373
- M && clearTimeout(M), M = setTimeout(() => {
374
- q(), F();
375
- }, 150);
376
- });
377
- let Q = null, V = null, H = 0, le = 0, Y = null, re = null;
378
- const pe = (t) => {
379
- const s = String(++H);
380
- N(), re = t, t.removeAttribute(ce), le = requestAnimationFrame(() => {
381
- t.setAttribute(ce, s), Y = setTimeout(() => {
382
- t.getAttribute(ce) === s && t.removeAttribute(ce);
383
- }, zt);
384
- });
385
- }, N = () => {
386
- cancelAnimationFrame(le), Y && (clearTimeout(Y), Y = null), re?.removeAttribute(ce), re = null;
387
- }, U = () => i.value ?? window, _e = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End", " "]), L = (t) => {
388
- if (t instanceof KeyboardEvent && !_e.has(t.key))
389
- return;
390
- t && t.type !== "scrollend" && H++, Q = null, V && (clearTimeout(V), V = null);
391
- const s = U();
392
- s.removeEventListener("scrollend", L), s.removeEventListener("wheel", L), s.removeEventListener("touchstart", L), s.removeEventListener("keydown", L);
393
- }, $e = (t) => {
394
- L(), Q = t;
395
- const s = U();
396
- s.addEventListener("scrollend", L, { once: !0 }), s.addEventListener("wheel", L, { passive: !0 }), s.addEventListener("touchstart", L, { passive: !0 }), s.addEventListener("keydown", L, { passive: !0 }), V = setTimeout(L, 1e3);
397
- }, ue = () => {
398
- const t = i.value;
399
- return {
400
- top: t ? t.getBoundingClientRect().top : 0,
401
- scrollTop: t ? t.scrollTop : window.scrollY,
402
- clientHeight: t ? t.clientHeight : window.innerHeight,
403
- scrollHeight: t ? t.scrollHeight : document.documentElement.scrollHeight
404
- };
405
- }, q = () => {
406
- const { top: t, scrollTop: s, clientHeight: T, scrollHeight: C } = ue(), K = p(), E = [];
407
- let _ = null, X = null;
408
- for (const O of e.anchors) {
409
- const ee = b(O);
410
- ee && (E.push(O.id), X = O.id, _ ??= O.id, ee.getBoundingClientRect().top - t <= (O.offset ?? K) + 8 && (_ = O.id));
411
- }
412
- const ge = E.length !== d.value.length || E.some((O, ee) => O !== d.value[ee]);
413
- return ge && (d.value = E), Q || (X && s > 0 && s + T >= C - 2 && (_ = X), v.value = _ ?? ""), ge;
414
- };
415
- let Ce = !1;
416
- const Ne = () => {
417
- Ce || (Ce = !0, requestAnimationFrame(() => {
418
- Ce = !1, q() && F();
419
- }));
420
- }, Ve = (t) => {
421
- const s = U();
422
- let T = !1;
423
- const C = () => {
424
- T || (T = !0, s.removeEventListener("scrollend", C), t());
425
- };
426
- s.addEventListener("scrollend", C, { once: !0 }), window.setTimeout(C, Ft);
427
- }, De = (t) => {
428
- const s = b(t);
429
- if (!s)
430
- return;
431
- v.value = t.id, $e(t.id);
432
- const T = t.offset ?? p(), { scrollTop: C, clientHeight: K, scrollHeight: E } = ue(), _ = i.value, X = _ ? s.getBoundingClientRect().top - _.getBoundingClientRect().top + _.scrollTop - T : s.getBoundingClientRect().top + window.scrollY - T, ge = Math.min(Math.max(X, 0), Math.max(E - K, 0)), O = Math.abs(ge - C) >= 2, ee = ++H;
433
- if ((_ ?? window).scrollTo({ behavior: "smooth", top: X }), !O) {
434
- pe(s);
435
- return;
436
- }
437
- Ve(() => {
438
- ee === H && pe(s);
439
- });
440
- }, Ue = (t, s) => {
441
- s(), De(t);
442
- };
443
- return we(() => {
444
- i.value = h(), U().addEventListener("scroll", Ne, { passive: !0 }), q(), F(), requestAnimationFrame(() => {
445
- q(), F();
446
- });
447
- }), xe(() => {
448
- U().removeEventListener("scroll", Ne), L(), H++, N(), M && clearTimeout(M);
449
- }), fe(() => e.anchors, () => {
450
- e.anchors.some((t) => t.id === v.value) || (v.value = ""), q(), F();
451
- }, { deep: !0 }), (t, s) => {
452
- const T = B("KButton"), C = B("KDropdownItem"), K = B("KDropdown");
453
- return r(), f("nav", {
454
- ref: "page-layout-anchor-navigation",
455
- "aria-label": m(l)("anchor_navigation.aria_label"),
456
- class: "page-layout-anchor-navigation",
457
- "data-fit": u.value,
458
- "data-testid": "page-layout-anchor-navigation"
459
- }, [
460
- $("ul", {
461
- ref: "page-layout-anchor-navigation-list",
462
- class: j({ "layout-hidden": u.value === "hidden" })
463
- }, [
464
- A.value.hasLeadingEllipsis ? (r(), f("li", Pt, " … ")) : k("", !0),
465
- (r(!0), f(Z, null, G(A.value.anchors, (E) => (r(), f("li", {
466
- key: `${E.id}-anchor`
467
- }, [
468
- $("button", {
469
- "aria-current": E.id === v.value ? "location" : void 0,
470
- class: j(["anchor-link", { active: E.id === v.value }]),
471
- "data-testid": g(E),
472
- title: E.label,
473
- type: "button",
474
- onClick: (_) => De(E)
475
- }, x(E.label), 11, Kt)
476
- ]))), 128)),
477
- A.value.hasTrailingEllipsis ? (r(), f("li", Ot, " … ")) : k("", !0),
478
- A.value.hasOverflowDropdown ? (r(), f("li", xt, [
479
- z(K, { "kpop-attributes": {
480
- placement: "bottom-end",
481
- popoverElementAttributes: { "data-testid": "anchor-navigation-overflow-dropdown-popover" }
482
- } }, {
483
- items: I(({ closeDropdown: E }) => [
484
- (r(!0), f(Z, null, G(n.value, (_) => (r(), D(C, {
485
- key: `${_.id}-dropdown-item`,
486
- "aria-current": _.id === v.value ? "location" : void 0,
487
- "data-testid": g(_),
488
- selected: _.id === v.value,
489
- onClick: (X) => Ue(_, E)
490
- }, {
491
- default: I(() => [
492
- oe(x(_.label), 1)
493
- ]),
494
- _: 2
495
- }, 1032, ["aria-current", "data-testid", "selected", "onClick"]))), 128))
496
- ]),
497
- default: I(() => [
498
- z(T, {
499
- appearance: "tertiary",
500
- "aria-label": m(l)("anchor_navigation.more_button.aria_label"),
501
- class: "anchor-overflow-button",
502
- "data-testid": "anchor-navigation-overflow-dropdown-button",
503
- icon: "",
504
- size: "small"
505
- }, {
506
- default: I(() => [
507
- z(m(We), {
508
- decorative: "",
509
- size: `var(--kui-icon-size-30, ${m(ne)})`
510
- }, null, 8, ["size"])
511
- ]),
512
- _: 1
513
- }, 8, ["aria-label"])
514
- ]),
515
- _: 1
516
- })
517
- ])) : k("", !0)
518
- ], 2)
519
- ], 8, Bt);
520
- };
521
- }
522
- }), Wt = /* @__PURE__ */ Te(Ht, [["__scopeId", "data-v-f6d370c5"]]), Ke = /* @__PURE__ */ Symbol("nested-page-layout-detection"), Mt = "page-layout:new-appearance", Vt = { class: "page-header-container" }, Ut = {
523
- key: 0,
524
- class: "page-header-start"
525
- }, jt = { class: "title-container" }, Gt = {
526
- key: 1,
527
- class: "page-layout-title-wrapper"
528
- }, Yt = {
529
- class: "page-layout-title",
530
- "data-testid": "page-layout-title"
531
- }, qt = ["aria-label"], Xt = {
532
- key: 3,
533
- class: "title-after-container"
534
- }, Zt = { class: "page-header-actions-container" }, Jt = {
535
- key: 0,
536
- class: "page-layout-aside-container",
537
- "data-testid": "page-layout-aside"
538
- }, Qt = { class: "page-layout-content" }, ea = /* @__PURE__ */ ke({
539
- __name: "PageLayout",
540
- props: {
541
- breadcrumbs: { default: () => [] },
542
- title: {},
543
- backTo: {},
544
- tabs: { default: () => [] },
545
- anchors: { default: () => [] },
546
- pageShortcutData: {}
547
- },
548
- setup(e) {
549
- qe((N) => ({
550
- a3279be2: se.value
551
- }));
552
- const l = de("app:navigateTo", null), a = de(Mt, null), o = de("app:pageShortcutsContext", null), { i18n: { t: u } } = Se.useI18n(), v = He(), d = tt(), n = Xe(), y = () => !!e.title || !!n.title, A = w(() => !!(e.breadcrumbs && e.breadcrumbs.length)), g = w(() => !!(e.tabs && e.tabs.length)), i = w(() => typeof e.backTo == "string"), h = w(() => ve(a) === !0), b = () => h.value && !y() && !A.value, p = () => g.value && !b(), S = w(() => h.value && !g.value && !!(e.anchors && e.anchors.length)), P = he("page-layout-header"), { height: J } = It(P, void 0, { box: "border-box" }), se = w(() => `calc(${J.value}px + var(--kui-space-60, ${Re}))`), c = w(() => !!e.pageShortcutData && !!e.pageShortcutData.entityType && !!e.pageShortcutData.label), F = w(() => c.value && !!o && "onFavoriteToggle" in o && typeof o.onFavoriteToggle == "function"), M = W(0), ie = w(() => !!o && "isFavorite" in o && typeof o.isFavorite == "function" && o.isFavorite(e.pageShortcutData) === !0), Q = async () => {
553
- if (e.backTo) {
554
- if (typeof e.backTo == "object") {
555
- v.push(e.backTo);
556
- return;
557
- }
558
- if (typeof l != "function") {
559
- window.location.href = e.backTo;
560
- return;
561
- }
562
- await l(e.backTo);
563
- }
564
- }, V = W(0), H = w(() => V.value > 0);
565
- Ze(Ke, () => (V.value++, () => {
566
- V.value--;
567
- }));
568
- const le = de(Ke, null), Y = W(null);
569
- typeof le == "function" && (Y.value = le());
570
- const re = () => {
571
- o.onFavoriteToggle({ ...e.pageShortcutData, path: e.pageShortcutData?.path || d.fullPath });
572
- };
573
- Je(() => {
574
- Y.value?.();
575
- });
576
- const pe = _t(() => {
577
- !H.value && c.value && o && "onEntityPageVisit" in o && typeof o.onEntityPageVisit == "function" && (o.onEntityPageVisit({ ...e.pageShortcutData, path: e.pageShortcutData?.path || d?.fullPath }), M.value++);
578
- }, 500);
579
- return fe([() => e.pageShortcutData, () => d?.fullPath], () => {
580
- pe();
581
- }, { immediate: !0, deep: !0 }), (N, U) => {
582
- const _e = B("KBreadcrumbs"), L = B("KTooltip"), $e = B("router-view");
583
- return r(), f("div", {
584
- class: j(["kong-ui-public-page-layout", { "new-appearance": h.value }]),
585
- "data-testid": "kong-ui-public-page-layout"
586
- }, [
587
- H.value ? k("", !0) : (r(), f("div", {
588
- key: 0,
589
- ref: "page-layout-header",
590
- class: j(["page-layout-header", { "is-empty": b() }]),
591
- "data-testid": "page-layout-header"
592
- }, [
593
- $("div", Vt, [
594
- b() ? k("", !0) : (r(), f("div", Ut, [
595
- A.value ? (r(), D(_e, {
596
- key: 0,
597
- class: "header-breadcrumbs",
598
- "data-testid": "page-layout-breadcrumbs",
599
- "item-max-width": "25ch",
600
- items: e.breadcrumbs
601
- }, Ae({ _: 2 }, [
602
- h.value ? {
603
- name: "divider",
604
- fn: I(() => [
605
- z(m(nt), {
606
- decorative: "",
607
- size: `var(--kui-icon-size-30, ${m(ne)})`
608
- }, null, 8, ["size"])
609
- ]),
610
- key: "0"
611
- } : void 0
612
- ]), 1032, ["items"])) : k("", !0),
613
- $("div", jt, [
614
- e.backTo && !h.value ? (r(), D(Ie(i.value ? "a" : "router-link"), ze({ key: 0 }, i.value ? { href: e.backTo } : { to: e.backTo }, {
615
- "aria-label": m(u)("back_button"),
616
- class: "navigate-back",
617
- "data-testid": "page-layout-navigate-back",
618
- tabindex: "0",
619
- onClick: ye(Q, ["prevent"]),
620
- onKeydown: Fe(ye(Q, ["prevent"]), ["enter"])
621
- }), {
622
- default: I(() => [
623
- z(m(st), {
624
- decorative: "",
625
- size: `var(--kui-icon-size-30, ${m(ne)})`
626
- }, null, 8, ["size"])
627
- ]),
628
- _: 1
629
- }, 16, ["aria-label", "onKeydown"])) : k("", !0),
630
- y() ? (r(), f("span", Gt, [
631
- R(N.$slots, "title", {}, () => [
632
- $("h1", Yt, x(e.title), 1)
633
- ], !0)
634
- ])) : k("", !0),
635
- F.value ? (r(), f("div", {
636
- key: M.value,
637
- class: "favorite-button-container"
638
- }, [
639
- z(L, {
640
- placement: "right",
641
- text: ie.value ? m(u)("favorite_button.remove_shortcut") : m(u)("favorite_button.save_shortcut")
642
- }, {
643
- default: I(() => [
644
- $("button", {
645
- "aria-label": ie.value ? m(u)("favorite_button.remove_shortcut") : m(u)("favorite_button.save_shortcut"),
646
- class: j(["favorite-button", { active: ie.value }]),
647
- "data-testid": "page-layout-favorite-button",
648
- type: "button",
649
- onClick: re
650
- }, [
651
- (r(), D(Ie(ie.value ? m(it) : m(lt)), {
652
- decorative: "",
653
- size: `var(--kui-icon-size-30, ${m(ne)})`
654
- }, null, 8, ["size"]))
655
- ], 10, qt)
656
- ]),
657
- _: 1
658
- }, 8, ["text"])
659
- ])) : k("", !0),
660
- N.$slots["title-after"] && y() ? (r(), f("div", Xt, [
661
- R(N.$slots, "title-after", {}, void 0, !0)
662
- ])) : k("", !0)
663
- ])
664
- ])),
665
- S.value && !b() ? (r(), D(Wt, {
666
- key: 1,
667
- anchors: e.anchors
668
- }, null, 8, ["anchors"])) : k("", !0),
669
- $("div", Zt, [
670
- R(N.$slots, "actions", {}, void 0, !0),
671
- U[0] || (U[0] = $("div", { "data-teleport-target": "ask-kai" }, null, -1))
672
- ])
673
- ]),
674
- p() ? (r(), D(Dt, {
675
- key: 0,
676
- tabs: e.tabs
677
- }, Ae({ _: 2 }, [
678
- G(e.tabs, (ue) => ({
679
- name: `tab-${ue.key}`,
680
- fn: I((q) => [
681
- R(N.$slots, `tab-${ue.key}`, Qe(et(q)), void 0, !0)
682
- ])
683
- }))
684
- ]), 1032, ["tabs"])) : k("", !0)
685
- ], 2)),
686
- $("div", {
687
- class: j(["page-layout-content-container", { "has-nested-page-layout": H.value }])
688
- }, [
689
- h.value && N.$slots.aside ? (r(), f("div", Jt, [
690
- R(N.$slots, "aside", {}, void 0, !0)
691
- ])) : k("", !0),
692
- $("div", Qt, [
693
- p() ? (r(), D($e, { key: 0 })) : R(N.$slots, "default", {}, void 0, !0, 1)
694
- ])
695
- ], 2)
696
- ], 2);
697
- };
698
- }
699
- }), ga = /* @__PURE__ */ Te(ea, [["__scopeId", "data-v-fa3bd24a"]]), ta = {
700
- key: 0,
701
- class: "about-card-description",
702
- "data-testid": "about-card-description"
703
- }, aa = {
704
- key: 1,
705
- class: "about-card-skeleton",
706
- "data-testid": "about-card-skeleton"
707
- }, oa = {
708
- key: 2,
709
- class: "about-card-rows",
710
- "data-testid": "about-card-rows"
711
- }, na = ["data-testid"], sa = { class: "about-card-row-label" }, ia = { class: "about-card-row-text" }, la = ["aria-label", "data-testid"], ra = { class: "about-card-row-value" }, ua = { class: "about-card-row-text" }, ca = {
712
- key: 3,
713
- class: "about-card-content",
714
- "data-testid": "about-card-content"
715
- }, da = /* @__PURE__ */ ke({
716
- __name: "AboutCard",
717
- props: {
718
- title: { default: "" },
719
- titleTag: { default: "h2" },
720
- description: { default: "" },
721
- rows: { default: () => [] },
722
- isLoading: { type: Boolean, default: !1 }
723
- },
724
- setup(e) {
725
- const l = w(() => e.rows.length || 4);
726
- return (a, o) => {
727
- const u = B("KSkeletonBox"), v = B("KTooltip"), d = B("KCard");
728
- return r(), D(d, {
729
- class: "kong-ui-public-about-card",
730
- title: e.title,
731
- "title-tag": e.titleTag
732
- }, Ae({
733
- default: I(() => [
734
- a.$slots.description || e.description ? (r(), f("p", ta, [
735
- R(a.$slots, "description", {}, () => [
736
- oe(x(e.description), 1)
737
- ], !0)
738
- ])) : k("", !0),
739
- e.isLoading ? (r(), f("div", aa, [
740
- (r(!0), f(Z, null, G(l.value, (n) => (r(), D(u, {
741
- key: n,
742
- height: "2",
743
- width: "100"
744
- }))), 128))
745
- ])) : e.rows.length ? (r(), f("dl", oa, [
746
- (r(!0), f(Z, null, G(e.rows, (n) => (r(), f("div", {
747
- key: n.key,
748
- class: "about-card-row",
749
- "data-testid": `about-card-row-${n.key}`
750
- }, [
751
- $("dt", sa, [
752
- R(a.$slots, `label-${n.key}`, { row: n }, () => [
753
- $("span", ia, x(n.label), 1)
754
- ], !0),
755
- n.tooltip ? (r(), D(v, {
756
- key: 0,
757
- text: n.tooltip
758
- }, {
759
- default: I(() => [
760
- $("button", {
761
- "aria-label": n.tooltip,
762
- class: "about-card-row-tooltip-trigger",
763
- "data-testid": `about-card-row-${n.key}-tooltip`,
764
- type: "button"
765
- }, [
766
- z(m(rt), {
767
- size: `var(--kui-icon-size-20, ${m(pt)})`
768
- }, null, 8, ["size"])
769
- ], 8, la)
770
- ]),
771
- _: 2
772
- }, 1032, ["text"])) : k("", !0)
773
- ]),
774
- $("dd", ra, [
775
- R(a.$slots, `row-${n.key}`, { row: n }, () => [
776
- $("span", ua, x(n.value), 1)
777
- ], !0)
778
- ])
779
- ], 8, na))), 128))
780
- ])) : k("", !0),
781
- a.$slots.default ? (r(), f("div", ca, [
782
- R(a.$slots, "default", {}, void 0, !0)
783
- ])) : k("", !0)
784
- ]),
785
- _: 2
786
- }, [
787
- a.$slots.title || e.title ? {
788
- name: "title",
789
- fn: I(() => [
790
- R(a.$slots, "title", {}, () => [
791
- oe(x(e.title), 1)
792
- ], !0)
793
- ]),
794
- key: "0"
795
- } : void 0,
796
- a.$slots.actions ? {
797
- name: "actions",
798
- fn: I(() => [
799
- R(a.$slots, "actions", {}, void 0, !0)
800
- ]),
801
- key: "1"
802
- } : void 0
803
- ]), 1032, ["title", "title-tag"]);
804
- };
805
- }
806
- }), ba = /* @__PURE__ */ Te(da, [["__scopeId", "data-v-48c05270"]]);
807
- export {
808
- ba as AboutCard,
809
- Mt as NEW_APPEARANCE_INJECTION_KEY,
810
- ga as PageLayout
811
- };
173
+ // src/components/PageLayoutTabs.vue?vue&type=script&setup=true&lang.ts
174
+ var ve = {
175
+ ref: "page-layout-tabs",
176
+ class: "page-layout-tabs",
177
+ "data-testid": "page-layout-tabs"
178
+ }, ye = { key: 0 }, be = ["aria-label"], xe = {
179
+ key: 0,
180
+ class: "layout-loader-container"
181
+ }, Se = /*@__PURE__*/ l({
182
+ __name: "PageLayoutTabs",
183
+ props: { tabs: { default: () => [] } },
184
+ setup(o) {
185
+ let { i18n: { t: l } } = ce.useI18n(), u = z(), d = p("app:navigateTo", null), f = (e) => {
186
+ typeof e.to == "string" ? typeof d == "function" ? d(e.to) : window.location.href = e.to : u.push(e.to);
187
+ }, _ = P("page-layout-tabs"), b = P("page-layout-tabs-list"), x = w(o.tabs.length), C = w(!1), O = t(() => o.tabs.slice(0, x.value)), k = t(() => o.tabs.slice(x.value)), j = async () => {
188
+ if (!_.value || !b.value) return;
189
+ C.value = !1, x.value = o.tabs.length, await h();
190
+ let e = _.value?.getBoundingClientRect().width - parseInt(le) * 2, t = b.value?.getBoundingClientRect().width;
191
+ if (!e || !t) C.value = !0;
192
+ else {
193
+ for (; t + 50 > e && x.value > 1;) x.value--, await h(), t = b.value?.getBoundingClientRect().width || 0;
194
+ C.value = !0;
195
+ }
196
+ }, N = null, te = () => {
197
+ N && clearTimeout(N), N = setTimeout(() => {
198
+ j();
199
+ }, 150);
200
+ };
201
+ return y(() => {
202
+ j(), ge(_, te);
203
+ }), v(() => {
204
+ N && clearTimeout(N);
205
+ }), F(() => o.tabs, () => {
206
+ j();
207
+ }, { deep: !0 }), (t, u) => {
208
+ let d = D("KDropdownItem"), p = D("KDropdown"), h = D("KSkeletonBox");
209
+ return S(), i("nav", ve, [a("ul", {
210
+ ref: "page-layout-tabs-list",
211
+ class: g({ "layout-computing": !C.value })
212
+ }, [(S(!0), i(e, null, T(O.value, (e) => (S(), i("li", { key: `${e.key}-tab` }, [(S(), n(ee(typeof e.to == "string" ? "a" : "router-link"), m({ ref_for: !0 }, typeof e.to == "string" ? { href: e.to } : { to: e.to }, {
213
+ "aria-current": e.active ? "page" : void 0,
214
+ class: ["tab-link", { active: e.active }],
215
+ "data-testid": e.dataTestId ? e.dataTestId : `page-layout-tab-${e.key}`,
216
+ tabindex: "0",
217
+ onClick: L((t) => f(e), ["prevent"]),
218
+ onKeydown: ne(L((t) => f(e), ["prevent"]), ["enter"])
219
+ }), {
220
+ default: I(() => [E(t.$slots, `tab-${e.key}`, { tab: e }, () => [s(A(e.label), 1)], !0)]),
221
+ _: 2
222
+ }, 1040, [
223
+ "aria-current",
224
+ "class",
225
+ "data-testid",
226
+ "onClick",
227
+ "onKeydown"
228
+ ]))]))), 128)), o.tabs.length > x.value ? (S(), i("li", ye, [c(p, { "kpop-attributes": {
229
+ placement: "bottom-end",
230
+ popoverElementAttributes: { "data-testid": "tabs-overflow-dropdown-popover" }
231
+ } }, {
232
+ items: I(() => [(S(!0), i(e, null, T(k.value, (e) => (S(), n(d, {
233
+ key: `${e.key}-dropdown-item`,
234
+ "aria-current": e.active ? "page" : void 0,
235
+ "data-testid": e.dataTestId ? e.dataTestId : `page-layout-tab-${e.key}`,
236
+ item: {
237
+ label: e.label,
238
+ value: e.key,
239
+ to: e.to
240
+ },
241
+ selected: e.active
242
+ }, {
243
+ default: I(() => [E(t.$slots, `tab-${e.key}`, { tab: e }, () => [s(A(e.label), 1)], !0)]),
244
+ _: 2
245
+ }, 1032, [
246
+ "aria-current",
247
+ "data-testid",
248
+ "item",
249
+ "selected"
250
+ ]))), 128))]),
251
+ default: I(() => [a("button", {
252
+ "aria-label": M(l)("tabs.more_button.aria_label"),
253
+ class: g(["tab-link", { active: k.value.find((e) => e.active) }]),
254
+ "data-testid": "tabs-overflow-dropdown-button"
255
+ }, [s(A(M(l)("tabs.more_button.label")) + " ", 1), c(M(H), {
256
+ decorative: "",
257
+ size: `var(--kui-icon-size-30, ${M(K)})`
258
+ }, null, 8, ["size"])], 10, be)]),
259
+ _: 3
260
+ })])) : r("", !0)], 2), C.value ? r("", !0) : (S(), i("div", xe, [(S(), i(e, null, T(3, (e) => c(h, {
261
+ key: `layout-loader-${e}`,
262
+ height: "1",
263
+ width: "5"
264
+ })), 64))]))], 512);
265
+ };
266
+ }
267
+ }), Ce = (e, t) => {
268
+ let n = e.__vccOpts || e;
269
+ for (let [e, r] of t) n[e] = r;
270
+ return n;
271
+ }, we = /*#__PURE__*/ Ce(Se, [["__scopeId", "data-v-02891bc1"]]), Te = ["aria-label", "data-fit"], Ee = {
272
+ key: 0,
273
+ "aria-hidden": "true",
274
+ class: "anchor-ellipsis",
275
+ "data-testid": "anchor-navigation-leading-ellipsis"
276
+ }, De = [
277
+ "aria-current",
278
+ "data-testid",
279
+ "title",
280
+ "onClick"
281
+ ], Oe = {
282
+ key: 1,
283
+ "aria-hidden": "true",
284
+ class: "anchor-ellipsis",
285
+ "data-testid": "anchor-navigation-trailing-ellipsis"
286
+ }, ke = { key: 2 }, Ae = 140, je = 22, Me = 16, Ne = "data-anchor-attention", Pe = 1200, Fe = 1600, Ie = /*#__PURE__*/ Ce(/* @__PURE__ */ l({
287
+ __name: "PageLayoutAnchorNavigation",
288
+ props: { anchors: { default: () => [] } },
289
+ setup(o) {
290
+ let { i18n: { t: l } } = ce.useI18n(), u = P("page-layout-anchor-navigation"), d = P("page-layout-anchor-navigation-list"), f = w("all"), p = w(""), m = w([]), _ = t(() => o.anchors.filter((e) => m.value.includes(e.id))), b = t(() => {
291
+ let e = _.value.findIndex((e) => e.id === p.value);
292
+ return e === -1 ? 0 : e;
293
+ }), x = t(() => {
294
+ let e = _.value, t = e.length, n = b.value;
295
+ if (f.value === "all") return {
296
+ anchors: e,
297
+ hasLeadingEllipsis: !1,
298
+ hasTrailingEllipsis: !1,
299
+ hasOverflowDropdown: !1
300
+ };
301
+ if (f.value === "hidden") return {
302
+ anchors: [],
303
+ hasLeadingEllipsis: !1,
304
+ hasTrailingEllipsis: !1,
305
+ hasOverflowDropdown: !1
306
+ };
307
+ if (f.value === "active-only") return {
308
+ anchors: e.slice(n, n + 1),
309
+ hasLeadingEllipsis: !1,
310
+ hasTrailingEllipsis: !1,
311
+ hasOverflowDropdown: !0
312
+ };
313
+ let r = f.value === "window-3" ? 3 : 2;
314
+ if (t <= r) return {
315
+ anchors: e,
316
+ hasLeadingEllipsis: !1,
317
+ hasTrailingEllipsis: !1,
318
+ hasOverflowDropdown: !0
319
+ };
320
+ let i = n < r ? 0 : n >= t - r ? t - r : n - 1;
321
+ return {
322
+ anchors: e.slice(i, i + r),
323
+ hasLeadingEllipsis: i > 0,
324
+ hasTrailingEllipsis: i + r < t,
325
+ hasOverflowDropdown: !0
326
+ };
327
+ }), C = (e) => e.dataTestId ?? `page-layout-anchor-${e.id.replace(/[^\w-]+/g, "-").replace(/^-+|-+$/g, "")}`, E = w(null), ee = () => {
328
+ let e = u.value?.parentElement ?? null;
329
+ for (; e;) {
330
+ let { overflowY: t } = getComputedStyle(e);
331
+ if (t === "auto" || t === "scroll" || t === "overlay") return e;
332
+ e = e.parentElement;
333
+ }
334
+ return null;
335
+ }, O = (e) => {
336
+ if (e.element) return e.element.isConnected ? e.element : null;
337
+ let t = E.value ?? document;
338
+ try {
339
+ return t.querySelector(e.id) ?? t.querySelector(`#${CSS.escape(e.id)}`);
340
+ } catch {
341
+ return null;
342
+ }
343
+ }, k = () => ((u.value?.closest(".page-layout-header"))?.getBoundingClientRect().height ?? 0) + parseInt(le, 10), j = parseInt(K, 10), N = (e) => e * Ae + 2 * j + je + (e + 2) * 2 + Me, te = () => 164 + Me, ne = 0, L = async () => {
344
+ if (!_.value.length) {
345
+ f.value = "hidden";
346
+ return;
347
+ }
348
+ let e = ++ne;
349
+ if (f.value = "all", await h(), e !== ne || !u.value || !d.value) return;
350
+ let t = u.value.getBoundingClientRect().width, n = d.value.getBoundingClientRect().width;
351
+ t <= 0 || n <= 0 || n + Me <= t || (N(3) <= t ? f.value = "window-3" : N(2) <= t ? f.value = "window-2" : te() <= t ? f.value = "active-only" : f.value = "hidden");
352
+ }, R = null;
353
+ ge(u, () => {
354
+ R && clearTimeout(R), R = setTimeout(() => {
355
+ J(), L();
356
+ }, 150);
357
+ });
358
+ let z = null, B = null, V = 0, re = 0, ie = null, U = null, ae = (e) => {
359
+ let t = String(++V);
360
+ oe(), U = e, e.removeAttribute(Ne), re = requestAnimationFrame(() => {
361
+ e.setAttribute(Ne, t), ie = setTimeout(() => {
362
+ e.getAttribute(Ne) === t && e.removeAttribute(Ne);
363
+ }, Pe);
364
+ });
365
+ }, oe = () => {
366
+ cancelAnimationFrame(re), ie &&= (clearTimeout(ie), null), U?.removeAttribute(Ne), U = null;
367
+ }, W = () => E.value ?? window, se = /* @__PURE__ */ new Set([
368
+ "ArrowUp",
369
+ "ArrowDown",
370
+ "PageUp",
371
+ "PageDown",
372
+ "Home",
373
+ "End",
374
+ " "
375
+ ]), G = (e) => {
376
+ if (e instanceof KeyboardEvent && !se.has(e.key)) return;
377
+ e && e.type !== "scrollend" && V++, z = null, B &&= (clearTimeout(B), null);
378
+ let t = W();
379
+ t.removeEventListener("scrollend", G), t.removeEventListener("wheel", G), t.removeEventListener("touchstart", G), t.removeEventListener("keydown", G);
380
+ }, ue = (e) => {
381
+ G(), z = e;
382
+ let t = W();
383
+ t.addEventListener("scrollend", G, { once: !0 }), t.addEventListener("wheel", G, { passive: !0 }), t.addEventListener("touchstart", G, { passive: !0 }), t.addEventListener("keydown", G, { passive: !0 }), B = setTimeout(G, 1e3);
384
+ }, q = () => {
385
+ let e = E.value;
386
+ return {
387
+ top: e ? e.getBoundingClientRect().top : 0,
388
+ scrollTop: e ? e.scrollTop : window.scrollY,
389
+ clientHeight: e ? e.clientHeight : window.innerHeight,
390
+ scrollHeight: e ? e.scrollHeight : document.documentElement.scrollHeight
391
+ };
392
+ }, J = () => {
393
+ let { top: e, scrollTop: t, clientHeight: n, scrollHeight: r } = q(), i = k(), a = [], s = null, c = null;
394
+ for (let t of o.anchors) {
395
+ let n = O(t);
396
+ n && (a.push(t.id), c = t.id, s ??= t.id, n.getBoundingClientRect().top - e <= (t.offset ?? i) + 8 && (s = t.id));
397
+ }
398
+ let l = a.length !== m.value.length || a.some((e, t) => e !== m.value[t]);
399
+ return l && (m.value = a), z || (c && t > 0 && t + n >= r - 2 && (s = c), p.value = s ?? ""), l;
400
+ }, Y = !1, X = () => {
401
+ Y || (Y = !0, requestAnimationFrame(() => {
402
+ Y = !1, J() && L();
403
+ }));
404
+ }, Z = (e) => {
405
+ let t = W(), n = !1, r = () => {
406
+ n || (n = !0, t.removeEventListener("scrollend", r), e());
407
+ };
408
+ t.addEventListener("scrollend", r, { once: !0 }), window.setTimeout(r, Fe);
409
+ }, Q = (e) => {
410
+ let t = O(e);
411
+ if (!t) return;
412
+ p.value = e.id, ue(e.id);
413
+ let n = e.offset ?? k(), { scrollTop: r, clientHeight: i, scrollHeight: a } = q(), o = E.value, s = o ? t.getBoundingClientRect().top - o.getBoundingClientRect().top + o.scrollTop - n : t.getBoundingClientRect().top + window.scrollY - n, c = Math.min(Math.max(s, 0), Math.max(a - i, 0)), l = Math.abs(c - r) >= 2, u = ++V;
414
+ (o ?? window).scrollTo({
415
+ behavior: "smooth",
416
+ top: s
417
+ }), l ? Z(() => {
418
+ u === V && ae(t);
419
+ }) : ae(t);
420
+ }, de = (e, t) => {
421
+ t(), Q(e);
422
+ };
423
+ return y(() => {
424
+ E.value = ee(), W().addEventListener("scroll", X, { passive: !0 }), J(), L(), requestAnimationFrame(() => {
425
+ J(), L();
426
+ });
427
+ }), v(() => {
428
+ W().removeEventListener("scroll", X), G(), V++, oe(), R && clearTimeout(R);
429
+ }), F(() => o.anchors, () => {
430
+ o.anchors.some((e) => e.id === p.value) || (p.value = ""), J(), L();
431
+ }, { deep: !0 }), (t, o) => {
432
+ let u = D("KButton"), d = D("KDropdownItem"), m = D("KDropdown");
433
+ return S(), i("nav", {
434
+ ref: "page-layout-anchor-navigation",
435
+ "aria-label": M(l)("anchor_navigation.aria_label"),
436
+ class: "page-layout-anchor-navigation",
437
+ "data-fit": f.value,
438
+ "data-testid": "page-layout-anchor-navigation"
439
+ }, [a("ul", {
440
+ ref: "page-layout-anchor-navigation-list",
441
+ class: g({ "layout-hidden": f.value === "hidden" })
442
+ }, [
443
+ x.value.hasLeadingEllipsis ? (S(), i("li", Ee, " … ")) : r("", !0),
444
+ (S(!0), i(e, null, T(x.value.anchors, (e) => (S(), i("li", { key: `${e.id}-anchor` }, [a("button", {
445
+ "aria-current": e.id === p.value ? "location" : void 0,
446
+ class: g(["anchor-link", { active: e.id === p.value }]),
447
+ "data-testid": C(e),
448
+ title: e.label,
449
+ type: "button",
450
+ onClick: (t) => Q(e)
451
+ }, A(e.label), 11, De)]))), 128)),
452
+ x.value.hasTrailingEllipsis ? (S(), i("li", Oe, " … ")) : r("", !0),
453
+ x.value.hasOverflowDropdown ? (S(), i("li", ke, [c(m, { "kpop-attributes": {
454
+ placement: "bottom-end",
455
+ popoverElementAttributes: { "data-testid": "anchor-navigation-overflow-dropdown-popover" }
456
+ } }, {
457
+ items: I(({ closeDropdown: t }) => [(S(!0), i(e, null, T(_.value, (e) => (S(), n(d, {
458
+ key: `${e.id}-dropdown-item`,
459
+ "aria-current": e.id === p.value ? "location" : void 0,
460
+ "data-testid": C(e),
461
+ selected: e.id === p.value,
462
+ onClick: (n) => de(e, t)
463
+ }, {
464
+ default: I(() => [s(A(e.label), 1)]),
465
+ _: 2
466
+ }, 1032, [
467
+ "aria-current",
468
+ "data-testid",
469
+ "selected",
470
+ "onClick"
471
+ ]))), 128))]),
472
+ default: I(() => [c(u, {
473
+ appearance: "tertiary",
474
+ "aria-label": M(l)("anchor_navigation.more_button.aria_label"),
475
+ class: "anchor-overflow-button",
476
+ "data-testid": "anchor-navigation-overflow-dropdown-button",
477
+ icon: "",
478
+ size: "small"
479
+ }, {
480
+ default: I(() => [c(M(H), {
481
+ decorative: "",
482
+ size: `var(--kui-icon-size-30, ${M(K)})`
483
+ }, null, 8, ["size"])]),
484
+ _: 1
485
+ }, 8, ["aria-label"])]),
486
+ _: 1
487
+ })])) : r("", !0)
488
+ ], 2)], 8, Te);
489
+ };
490
+ }
491
+ }), [["__scopeId", "data-v-f6d370c5"]]), Le = Symbol("nested-page-layout-detection"), Re = "page-layout:new-appearance", ze = { class: "page-header-container" }, Be = {
492
+ key: 0,
493
+ class: "page-header-start"
494
+ }, Ve = { class: "title-container" }, He = {
495
+ key: 1,
496
+ class: "page-layout-title-wrapper"
497
+ }, Ue = {
498
+ class: "page-layout-title",
499
+ "data-testid": "page-layout-title"
500
+ }, We = ["aria-label"], Ge = {
501
+ key: 3,
502
+ class: "title-after-container"
503
+ }, Ke = { class: "page-header-actions-container" }, qe = {
504
+ key: 0,
505
+ class: "page-layout-aside-container",
506
+ "data-testid": "page-layout-aside"
507
+ }, Je = { class: "page-layout-content" }, Ye = /*#__PURE__*/ Ce(/* @__PURE__ */ l({
508
+ __name: "PageLayout",
509
+ props: {
510
+ breadcrumbs: { default: () => [] },
511
+ title: {},
512
+ backTo: {},
513
+ tabs: { default: () => [] },
514
+ anchors: { default: () => [] },
515
+ pageShortcutData: {}
516
+ },
517
+ setup(e) {
518
+ N((e) => ({ a3279be2: G.value }));
519
+ let s = p("app:navigateTo", null), l = p(Re, null), u = p("app:pageShortcutsContext", null), { i18n: { t: d } } = ce.useI18n(), h = z(), v = R(), y = te(), b = () => !!e.title || !!y.title, O = t(() => !!(e.breadcrumbs && e.breadcrumbs.length)), k = t(() => !!(e.tabs && e.tabs.length)), B = t(() => typeof e.backTo == "string"), V = t(() => j(l) === !0), H = () => V.value && !b() && !O.value, U = () => k.value && !H(), W = t(() => V.value && !k.value && !!(e.anchors && e.anchors.length)), { height: se } = _e(P("page-layout-header"), void 0, { box: "border-box" }), G = t(() => `calc(${se.value}px + var(--kui-space-60, ${le}))`), ue = t(() => !!e.pageShortcutData && !!e.pageShortcutData.entityType && !!e.pageShortcutData.label), q = t(() => ue.value && !!u && "onFavoriteToggle" in u && typeof u.onFavoriteToggle == "function"), J = w(0), Y = t(() => !!u && "isFavorite" in u && typeof u.isFavorite == "function" && u.isFavorite(e.pageShortcutData) === !0), X = async () => {
520
+ e.backTo && (typeof e.backTo == "object" ? h.push(e.backTo) : typeof s == "function" ? await s(e.backTo) : window.location.href = e.backTo);
521
+ }, Z = w(0), Q = t(() => Z.value > 0);
522
+ C(Le, () => (Z.value++, () => {
523
+ Z.value--;
524
+ }));
525
+ let fe = p(Le, null), pe = w(null);
526
+ typeof fe == "function" && (pe.value = fe());
527
+ let $ = () => {
528
+ u.onFavoriteToggle({
529
+ ...e.pageShortcutData,
530
+ path: e.pageShortcutData?.path || v.fullPath
531
+ });
532
+ };
533
+ x(() => {
534
+ pe.value?.();
535
+ });
536
+ let me = de(() => {
537
+ !Q.value && ue.value && u && "onEntityPageVisit" in u && typeof u.onEntityPageVisit == "function" && (u.onEntityPageVisit({
538
+ ...e.pageShortcutData,
539
+ path: e.pageShortcutData?.path || v?.fullPath
540
+ }), J.value++);
541
+ }, 500);
542
+ return F([() => e.pageShortcutData, () => v?.fullPath], () => {
543
+ me();
544
+ }, {
545
+ immediate: !0,
546
+ deep: !0
547
+ }), (t, s) => {
548
+ let l = D("KBreadcrumbs"), u = D("KTooltip"), p = D("router-view");
549
+ return S(), i("div", {
550
+ class: g(["kong-ui-public-page-layout", { "new-appearance": V.value }]),
551
+ "data-testid": "kong-ui-public-page-layout"
552
+ }, [Q.value ? r("", !0) : (S(), i("div", {
553
+ key: 0,
554
+ ref: "page-layout-header",
555
+ class: g(["page-layout-header", { "is-empty": H() }]),
556
+ "data-testid": "page-layout-header"
557
+ }, [a("div", ze, [
558
+ H() ? r("", !0) : (S(), i("div", Be, [O.value ? (S(), n(l, {
559
+ key: 0,
560
+ class: "header-breadcrumbs",
561
+ "data-testid": "page-layout-breadcrumbs",
562
+ "item-max-width": "25ch",
563
+ items: e.breadcrumbs
564
+ }, o({ _: 2 }, [V.value ? {
565
+ name: "divider",
566
+ fn: I(() => [c(M(ie), {
567
+ decorative: "",
568
+ size: `var(--kui-icon-size-30, ${M(K)})`
569
+ }, null, 8, ["size"])]),
570
+ key: "0"
571
+ } : void 0]), 1032, ["items"])) : r("", !0), a("div", Ve, [
572
+ e.backTo && !V.value ? (S(), n(ee(B.value ? "a" : "router-link"), m({ key: 0 }, B.value ? { href: e.backTo } : { to: e.backTo }, {
573
+ "aria-label": M(d)("back_button"),
574
+ class: "navigate-back",
575
+ "data-testid": "page-layout-navigate-back",
576
+ tabindex: "0",
577
+ onClick: L(X, ["prevent"]),
578
+ onKeydown: ne(L(X, ["prevent"]), ["enter"])
579
+ }), {
580
+ default: I(() => [c(M(re), {
581
+ decorative: "",
582
+ size: `var(--kui-icon-size-30, ${M(K)})`
583
+ }, null, 8, ["size"])]),
584
+ _: 1
585
+ }, 16, ["aria-label", "onKeydown"])) : r("", !0),
586
+ b() ? (S(), i("span", He, [E(t.$slots, "title", {}, () => [a("h1", Ue, A(e.title), 1)], !0)])) : r("", !0),
587
+ q.value ? (S(), i("div", {
588
+ key: J.value,
589
+ class: "favorite-button-container"
590
+ }, [c(u, {
591
+ placement: "right",
592
+ text: Y.value ? M(d)("favorite_button.remove_shortcut") : M(d)("favorite_button.save_shortcut")
593
+ }, {
594
+ default: I(() => [a("button", {
595
+ "aria-label": Y.value ? M(d)("favorite_button.remove_shortcut") : M(d)("favorite_button.save_shortcut"),
596
+ class: g(["favorite-button", { active: Y.value }]),
597
+ "data-testid": "page-layout-favorite-button",
598
+ type: "button",
599
+ onClick: $
600
+ }, [(S(), n(ee(Y.value ? M(ae) : M(oe)), {
601
+ decorative: "",
602
+ size: `var(--kui-icon-size-30, ${M(K)})`
603
+ }, null, 8, ["size"]))], 10, We)]),
604
+ _: 1
605
+ }, 8, ["text"])])) : r("", !0),
606
+ t.$slots["title-after"] && b() ? (S(), i("div", Ge, [E(t.$slots, "title-after", {}, void 0, !0)])) : r("", !0)
607
+ ])])),
608
+ W.value && !H() ? (S(), n(Ie, {
609
+ key: 1,
610
+ anchors: e.anchors
611
+ }, null, 8, ["anchors"])) : r("", !0),
612
+ a("div", Ke, [E(t.$slots, "actions", {}, void 0, !0), s[0] ||= a("div", { "data-teleport-target": "ask-kai" }, null, -1)])
613
+ ]), U() ? (S(), n(we, {
614
+ key: 0,
615
+ tabs: e.tabs
616
+ }, o({ _: 2 }, [T(e.tabs, (e) => ({
617
+ name: `tab-${e.key}`,
618
+ fn: I((n) => [E(t.$slots, `tab-${e.key}`, _(f(n)), void 0, !0)])
619
+ }))]), 1032, ["tabs"])) : r("", !0)], 2)), a("div", { class: g(["page-layout-content-container", { "has-nested-page-layout": Q.value }]) }, [V.value && t.$slots.aside ? (S(), i("div", qe, [E(t.$slots, "aside", {}, void 0, !0)])) : r("", !0), a("div", Je, [U() ? (S(), n(p, { key: 0 })) : E(t.$slots, "default", {}, void 0, !0, 1)])], 2)], 2);
620
+ };
621
+ }
622
+ }), [["__scopeId", "data-v-fa3bd24a"]]), Xe = {
623
+ key: 0,
624
+ class: "about-card-description",
625
+ "data-testid": "about-card-description"
626
+ }, Ze = {
627
+ key: 1,
628
+ class: "about-card-skeleton",
629
+ "data-testid": "about-card-skeleton"
630
+ }, Qe = {
631
+ key: 2,
632
+ class: "about-card-rows",
633
+ "data-testid": "about-card-rows"
634
+ }, $e = ["data-testid"], et = { class: "about-card-row-label" }, tt = { class: "about-card-row-text" }, nt = ["aria-label", "data-testid"], rt = { class: "about-card-row-value" }, it = { class: "about-card-row-text" }, at = {
635
+ key: 3,
636
+ class: "about-card-content",
637
+ "data-testid": "about-card-content"
638
+ }, ot = /*#__PURE__*/ Ce(/* @__PURE__ */ l({
639
+ __name: "AboutCard",
640
+ props: {
641
+ title: { default: "" },
642
+ titleTag: { default: "h2" },
643
+ description: { default: "" },
644
+ rows: { default: () => [] },
645
+ isLoading: {
646
+ type: Boolean,
647
+ default: !1
648
+ }
649
+ },
650
+ setup(l) {
651
+ let u = t(() => l.rows.length || 4);
652
+ return (t, d) => {
653
+ let f = D("KSkeletonBox"), p = D("KTooltip"), m = D("KCard");
654
+ return S(), n(m, {
655
+ class: "kong-ui-public-about-card",
656
+ title: l.title,
657
+ "title-tag": l.titleTag
658
+ }, o({
659
+ default: I(() => [
660
+ t.$slots.description || l.description ? (S(), i("p", Xe, [E(t.$slots, "description", {}, () => [s(A(l.description), 1)], !0)])) : r("", !0),
661
+ l.isLoading ? (S(), i("div", Ze, [(S(!0), i(e, null, T(u.value, (e) => (S(), n(f, {
662
+ key: e,
663
+ height: "2",
664
+ width: "100"
665
+ }))), 128))])) : l.rows.length ? (S(), i("dl", Qe, [(S(!0), i(e, null, T(l.rows, (e) => (S(), i("div", {
666
+ key: e.key,
667
+ class: "about-card-row",
668
+ "data-testid": `about-card-row-${e.key}`
669
+ }, [a("dt", et, [E(t.$slots, `label-${e.key}`, { row: e }, () => [a("span", tt, A(e.label), 1)], !0), e.tooltip ? (S(), n(p, {
670
+ key: 0,
671
+ text: e.tooltip
672
+ }, {
673
+ default: I(() => [a("button", {
674
+ "aria-label": e.tooltip,
675
+ class: "about-card-row-tooltip-trigger",
676
+ "data-testid": `about-card-row-${e.key}-tooltip`,
677
+ type: "button"
678
+ }, [c(M(U), { size: `var(--kui-icon-size-20, ${M(G)})` }, null, 8, ["size"])], 8, nt)]),
679
+ _: 2
680
+ }, 1032, ["text"])) : r("", !0)]), a("dd", rt, [E(t.$slots, `row-${e.key}`, { row: e }, () => [a("span", it, A(e.value), 1)], !0)])], 8, $e))), 128))])) : r("", !0),
681
+ t.$slots.default ? (S(), i("div", at, [E(t.$slots, "default", {}, void 0, !0)])) : r("", !0)
682
+ ]),
683
+ _: 2
684
+ }, [t.$slots.title || l.title ? {
685
+ name: "title",
686
+ fn: I(() => [E(t.$slots, "title", {}, () => [s(A(l.title), 1)], !0)]),
687
+ key: "0"
688
+ } : void 0, t.$slots.actions ? {
689
+ name: "actions",
690
+ fn: I(() => [E(t.$slots, "actions", {}, void 0, !0)]),
691
+ key: "1"
692
+ } : void 0]), 1032, ["title", "title-tag"]);
693
+ };
694
+ }
695
+ }), [["__scopeId", "data-v-48c05270"]]);
696
+ export { ot as AboutCard, Re as NEW_APPEARANCE_INJECTION_KEY, Ye as PageLayout };