slippers-ui 3.1.25 → 3.1.26-alpha

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.
@@ -1,142 +1,142 @@
1
- import { defineComponent as C, computed as y, createElementBlock as i, openBlock as s, mergeProps as j, renderSlot as b, normalizeClass as m, createElementVNode as h, createBlock as R, resolveDynamicComponent as F, normalizeStyle as J, withCtx as N, createCommentVNode as M, ref as I, onMounted as W, nextTick as oe, onUnmounted as Q, createVNode as k, unref as G, Fragment as T, renderList as z, withModifiers as Z, toDisplayString as L, createTextVNode as B, resolveComponent as se, withDirectives as D, vShow as U, normalizeProps as ne, guardReactiveProps as le, onBeforeUnmount as X, onBeforeMount as ie, vModelSelect as re } from "vue";
2
- import { _ as w, C as Y, a as x, b as ee, c as de } from "./chunks/ChevronLgUp-HZ_-4Y4K.js";
3
- const ce = ["href"], ue = /* @__PURE__ */ C({
1
+ import { defineComponent as L, computed as $, openBlock as s, createElementBlock as r, mergeProps as H, renderSlot as b, normalizeClass as _, createElementVNode as v, createBlock as O, resolveDynamicComponent as j, normalizeStyle as Z, withCtx as N, createCommentVNode as M, ref as k, onMounted as P, onUnmounted as J, createVNode as y, unref as G, Fragment as T, renderList as z, withModifiers as q, toDisplayString as w, createTextVNode as B, resolveComponent as ne, withDirectives as F, vShow as D, normalizeProps as se, guardReactiveProps as le, onBeforeUnmount as K, onBeforeMount as Q, watch as U, vModelSelect as ie } from "vue";
2
+ import { _ as S, C as X, a as Y, b as x, c as re } from "./chunks/ChevronLgUp-EczI5oF8.js";
3
+ const de = ["href"], ce = /* @__PURE__ */ L({
4
4
  __name: "SlpButton",
5
5
  props: {
6
6
  disabled: { type: Boolean },
7
7
  variant: {},
8
8
  href: {}
9
9
  },
10
- setup(v) {
11
- const e = v, n = y(() => e.disabled ?? !1), l = y(() => e.variant ?? "primary");
12
- y(() => e.href ?? "");
13
- const a = y(() => {
14
- let o = [`slp-btn-${l.value}`];
15
- return n.value && o.push("slp-btn-disabled"), o.join(" ");
10
+ setup(p) {
11
+ const e = p, o = $(() => e.disabled ?? !1), i = $(() => e.variant ?? "primary");
12
+ $(() => e.href ?? "");
13
+ const a = $(() => {
14
+ let n = [`slp-btn-${i.value}`];
15
+ return o.value && n.push("slp-btn-disabled"), n.join(" ");
16
16
  });
17
- return (o, c) => e.href ? (s(), i("a", j({ key: 0 }, o.$attrs, {
17
+ return (n, d) => e.href ? (s(), r("a", H({ key: 0 }, n.$attrs, {
18
18
  class: ["slp-btn", a.value],
19
19
  href: e.href
20
20
  }), [
21
- b(o.$slots, "default", {}, void 0, !0)
22
- ], 16, ce)) : (s(), i("button", j({ key: 1 }, o.$attrs, {
21
+ b(n.$slots, "default", {}, void 0, !0)
22
+ ], 16, de)) : (s(), r("button", H({ key: 1 }, n.$attrs, {
23
23
  class: ["slp-btn", a.value],
24
24
  type: "button"
25
25
  }), [
26
- b(o.$slots, "default", {}, void 0, !0)
26
+ b(n.$slots, "default", {}, void 0, !0)
27
27
  ], 16));
28
28
  }
29
- }), K = /* @__PURE__ */ w(ue, [["__scopeId", "data-v-56e2df5f"]]), pe = /* @__PURE__ */ C({
29
+ }), W = /* @__PURE__ */ S(ce, [["__scopeId", "data-v-56e2df5f"]]), ue = /* @__PURE__ */ L({
30
30
  __name: "SlpColumn",
31
31
  props: {
32
32
  cols: {},
33
33
  size: {}
34
34
  },
35
- setup(v) {
36
- const e = v, n = y(() => e.cols ?? null), l = y(() => e.size ?? "md"), a = y(() => n.value ? `slp-col-${l.value}-${n.value}` : `slp-col-${l.value}`);
37
- return (o, c) => (s(), i("div", {
38
- class: m(a.value)
35
+ setup(p) {
36
+ const e = p, o = $(() => e.cols ?? null), i = $(() => e.size ?? "md"), a = $(() => o.value ? `slp-col-${i.value}-${o.value}` : `slp-col-${i.value}`);
37
+ return (n, d) => (s(), r("div", {
38
+ class: _(a.value)
39
39
  }, [
40
- b(o.$slots, "default", {}, void 0, !0)
40
+ b(n.$slots, "default", {}, void 0, !0)
41
41
  ], 2));
42
42
  }
43
- }), Ct = /* @__PURE__ */ w(pe, [["__scopeId", "data-v-00b68f22"]]), ve = {
43
+ }), It = /* @__PURE__ */ S(ue, [["__scopeId", "data-v-00b68f22"]]), pe = {
44
44
  key: 0,
45
45
  class: "slp-full-light-purple-background"
46
46
  }, fe = {
47
47
  key: 1,
48
48
  class: "slp-charcoal-grey-background"
49
- }, he = {
49
+ }, ve = {
50
50
  key: 2,
51
51
  class: "slp-gradient-background"
52
- }, ge = {
52
+ }, he = {
53
53
  key: 3,
54
54
  class: "slp-full-gradient-background"
55
55
  }, me = {
56
56
  key: 4,
57
57
  class: "slp-full-charcoal-background"
58
- }, _e = {
58
+ }, ge = {
59
59
  key: 5,
60
60
  class: "slp-partial-charcoal-background"
61
- }, be = {
61
+ }, _e = {
62
62
  key: 6,
63
63
  class: "slp-half-grey-background"
64
- }, ye = {
64
+ }, be = {
65
65
  key: 7,
66
66
  class: "slp-partial-white-background"
67
- }, $e = {
67
+ }, ye = {
68
68
  key: 8,
69
69
  class: "slp-partial-grey-background"
70
- }, ke = /* @__PURE__ */ C({
70
+ }, $e = /* @__PURE__ */ L({
71
71
  __name: "SlpContainer",
72
72
  props: {
73
73
  fluid: { type: Boolean },
74
74
  variant: {}
75
75
  },
76
- setup(v) {
77
- const e = v, n = y(() => e.fluid ?? !1), l = y(() => e.variant ?? "white"), a = y(() => n.value ? "fluid" : "");
78
- return (o, c) => l.value === "light-purple-100" ? (s(), i("div", ve, [
79
- h("div", {
80
- class: m(["slp-container", a.value])
76
+ setup(p) {
77
+ const e = p, o = $(() => e.fluid ?? !1), i = $(() => e.variant ?? "white"), a = $(() => o.value ? "fluid" : "");
78
+ return (n, d) => i.value === "light-purple-100" ? (s(), r("div", pe, [
79
+ v("div", {
80
+ class: _(["slp-container", a.value])
81
81
  }, [
82
- b(o.$slots, "default", {}, void 0, !0)
82
+ b(n.$slots, "default", {}, void 0, !0)
83
83
  ], 2)
84
- ])) : l.value === "grey-100" ? (s(), i("div", fe, [
85
- h("div", {
86
- class: m(["slp-container", a.value])
84
+ ])) : i.value === "grey-100" ? (s(), r("div", fe, [
85
+ v("div", {
86
+ class: _(["slp-container", a.value])
87
87
  }, [
88
- b(o.$slots, "default", {}, void 0, !0)
88
+ b(n.$slots, "default", {}, void 0, !0)
89
89
  ], 2)
90
- ])) : l.value === "gradient" ? (s(), i("div", he, [
91
- h("div", {
92
- class: m(["slp-container", a.value])
90
+ ])) : i.value === "gradient" ? (s(), r("div", ve, [
91
+ v("div", {
92
+ class: _(["slp-container", a.value])
93
93
  }, [
94
- b(o.$slots, "default", {}, void 0, !0)
94
+ b(n.$slots, "default", {}, void 0, !0)
95
95
  ], 2)
96
- ])) : l.value === "gradient-full" ? (s(), i("div", ge, [
97
- h("div", {
98
- class: m(["slp-container", a.value])
96
+ ])) : i.value === "gradient-full" ? (s(), r("div", he, [
97
+ v("div", {
98
+ class: _(["slp-container", a.value])
99
99
  }, [
100
- b(o.$slots, "default", {}, void 0, !0)
100
+ b(n.$slots, "default", {}, void 0, !0)
101
101
  ], 2)
102
- ])) : l.value === "charcoal-100" ? (s(), i("div", me, [
103
- h("div", {
104
- class: m(["slp-container", a.value])
102
+ ])) : i.value === "charcoal-100" ? (s(), r("div", me, [
103
+ v("div", {
104
+ class: _(["slp-container", a.value])
105
105
  }, [
106
- b(o.$slots, "default", {}, void 0, !0)
106
+ b(n.$slots, "default", {}, void 0, !0)
107
107
  ], 2)
108
- ])) : l.value === "charcoal-75" ? (s(), i("div", _e, [
109
- h("div", {
110
- class: m(["slp-container", a.value])
108
+ ])) : i.value === "charcoal-75" ? (s(), r("div", ge, [
109
+ v("div", {
110
+ class: _(["slp-container", a.value])
111
111
  }, [
112
- b(o.$slots, "default", {}, void 0, !0)
112
+ b(n.$slots, "default", {}, void 0, !0)
113
113
  ], 2)
114
- ])) : l.value === "grey-50" ? (s(), i("div", be, [
115
- h("div", {
116
- class: m(["slp-container", a.value])
114
+ ])) : i.value === "grey-50" ? (s(), r("div", _e, [
115
+ v("div", {
116
+ class: _(["slp-container", a.value])
117
117
  }, [
118
- b(o.$slots, "default", {}, void 0, !0)
118
+ b(n.$slots, "default", {}, void 0, !0)
119
119
  ], 2)
120
- ])) : l.value === "white-75" ? (s(), i("div", ye, [
121
- h("div", {
122
- class: m(["slp-container", a.value])
120
+ ])) : i.value === "white-75" ? (s(), r("div", be, [
121
+ v("div", {
122
+ class: _(["slp-container", a.value])
123
123
  }, [
124
- b(o.$slots, "default", {}, void 0, !0)
124
+ b(n.$slots, "default", {}, void 0, !0)
125
125
  ], 2)
126
- ])) : l.value === "grey-75" ? (s(), i("div", $e, [
127
- h("div", {
128
- class: m(["slp-container", a.value])
126
+ ])) : i.value === "grey-75" ? (s(), r("div", ye, [
127
+ v("div", {
128
+ class: _(["slp-container", a.value])
129
129
  }, [
130
- b(o.$slots, "default", {}, void 0, !0)
130
+ b(n.$slots, "default", {}, void 0, !0)
131
131
  ], 2)
132
- ])) : (s(), i("div", {
132
+ ])) : (s(), r("div", {
133
133
  key: 9,
134
- class: m(["slp-container", a.value])
134
+ class: _(["slp-container", a.value])
135
135
  }, [
136
- b(o.$slots, "default", {}, void 0, !0)
136
+ b(n.$slots, "default", {}, void 0, !0)
137
137
  ], 2));
138
138
  }
139
- }), te = /* @__PURE__ */ w(ke, [["__scopeId", "data-v-e594efe8"]]), we = /* @__PURE__ */ C({
139
+ }), ee = /* @__PURE__ */ S($e, [["__scopeId", "data-v-67a0761e"]]), ke = /* @__PURE__ */ L({
140
140
  __name: "SlpIcon",
141
141
  props: {
142
142
  size: {
@@ -155,46 +155,46 @@ const ce = ["href"], ue = /* @__PURE__ */ C({
155
155
  required: !0
156
156
  }
157
157
  },
158
- setup(v) {
159
- const e = v, n = y(() => {
158
+ setup(p) {
159
+ const e = p, o = $(() => {
160
160
  const a = ["slp-icon"];
161
161
  return typeof e.size == "string" && isNaN(Number(e.size)) && a.push(`slp-icon--size-${e.size}`), e.color && !e.color.startsWith("#") && a.push(`slp-icon--color-${e.color}`), a;
162
- }), l = y(() => {
163
- var o;
162
+ }), i = $(() => {
163
+ var n;
164
164
  const a = {};
165
- if ((o = e.color) != null && o.startsWith("#") && (a.color = e.color, a.fill = e.color), typeof e.size == "number" || !isNaN(Number(e.size))) {
166
- const c = typeof e.size == "number" ? e.size : Number(e.size);
167
- a.width = `${c}px`, a.height = `${c}px`;
165
+ if ((n = e.color) != null && n.startsWith("#") && (a.color = e.color, a.fill = e.color), typeof e.size == "number" || !isNaN(Number(e.size))) {
166
+ const d = typeof e.size == "number" ? e.size : Number(e.size);
167
+ a.width = `${d}px`, a.height = `${d}px`;
168
168
  }
169
169
  return a;
170
170
  });
171
- return (a, o) => {
172
- var c, r;
173
- return s(), R(F(v.icon), {
174
- class: m(["slp-icon", n.value]),
175
- style: J(l.value),
171
+ return (a, n) => {
172
+ var d, l;
173
+ return s(), O(j(p.icon), {
174
+ class: _(["slp-icon", o.value]),
175
+ style: Z(i.value),
176
176
  role: "img",
177
177
  "aria-hidden": "true",
178
- "data-icon-name": ((r = (c = v.icon) == null ? void 0 : c.__docgenInfo) == null ? void 0 : r.displayName) || ""
178
+ "data-icon-name": ((l = (d = p.icon) == null ? void 0 : d.__docgenInfo) == null ? void 0 : l.displayName) || ""
179
179
  }, null, 8, ["class", "style", "data-icon-name"]);
180
180
  };
181
181
  }
182
- }), P = /* @__PURE__ */ w(we, [["__scopeId", "data-v-b82aeda9"]]), Se = {}, Le = { class: "slp-row" };
183
- function Ce(v, e) {
184
- return s(), i("div", Le, [
185
- b(v.$slots, "default", {}, void 0, !0)
182
+ }), R = /* @__PURE__ */ S(ke, [["__scopeId", "data-v-b82aeda9"]]), we = {}, Se = { class: "slp-row" };
183
+ function Ce(p, e) {
184
+ return s(), r("div", Se, [
185
+ b(p.$slots, "default", {}, void 0, !0)
186
186
  ]);
187
187
  }
188
- const It = /* @__PURE__ */ w(Se, [["render", Ce], ["__scopeId", "data-v-adc8d02f"]]), Ie = {
188
+ const Nt = /* @__PURE__ */ S(we, [["render", Ce], ["__scopeId", "data-v-adc8d02f"]]), Le = {
189
189
  key: 0,
190
190
  class: "arrow-symbol"
191
- }, Ne = /* @__PURE__ */ C({
191
+ }, Ie = /* @__PURE__ */ L({
192
192
  __name: "SlpTypography",
193
193
  props: {
194
194
  variant: {},
195
195
  tag: {}
196
196
  },
197
- setup(v) {
197
+ setup(p) {
198
198
  const e = [
199
199
  "display1",
200
200
  "heading1",
@@ -217,21 +217,21 @@ const It = /* @__PURE__ */ w(Se, [["render", Ce], ["__scopeId", "data-v-adc8d02f
217
217
  "arrow",
218
218
  "quotes",
219
219
  "emphasis"
220
- ], n = ["span", "h1", "h2", "h3", "h4", "h5", "p", "div"], l = v, a = y(() => e.includes(l.variant || "") ? l.variant : "body1"), o = y(() => n.includes(l.tag || "") ? l.tag : "span"), c = y(() => `slp-text-${a.value}`);
221
- return (r, u) => (s(), R(F(o.value), {
222
- class: m(c.value)
220
+ ], o = ["span", "h1", "h2", "h3", "h4", "p", "div"], i = p, a = $(() => e.includes(i.variant || "") ? i.variant : "body1"), n = $(() => o.includes(i.tag || "") ? i.tag : "span"), d = $(() => `slp-text-${a.value}`);
221
+ return (l, c) => (s(), O(j(n.value), {
222
+ class: _(d.value)
223
223
  }, {
224
224
  default: N(() => [
225
- b(r.$slots, "default", {}, void 0, !0),
226
- a.value === "arrow" ? (s(), i("span", Ie, "→")) : M("", !0)
225
+ b(l.$slots, "default", {}, void 0, !0),
226
+ a.value === "arrow" ? (s(), r("span", Le, "→")) : M("", !0)
227
227
  ]),
228
228
  _: 3
229
229
  }, 8, ["class"]));
230
230
  }
231
- }), A = /* @__PURE__ */ w(Ne, [["__scopeId", "data-v-64ad2128"]]), Te = {
231
+ }), A = /* @__PURE__ */ S(Ie, [["__scopeId", "data-v-fba90f83"]]), Ne = {
232
232
  key: 0,
233
233
  class: "dropdown-menu"
234
- }, ze = ["onClick"], Ee = { class: "side-navigation" }, Ve = ["data-ga-name", "onClick"], Me = /* @__PURE__ */ C({
234
+ }, Te = ["onClick"], ze = { class: "side-navigation" }, Me = ["data-ga-name", "onClick"], Ee = /* @__PURE__ */ L({
235
235
  __name: "SlpSideNavigation",
236
236
  props: {
237
237
  position: {
@@ -247,101 +247,98 @@ const It = /* @__PURE__ */ w(Se, [["render", Ce], ["__scopeId", "data-v-adc8d02f
247
247
  required: !0
248
248
  }
249
249
  },
250
- setup(v) {
251
- const e = v, n = I(null), l = (d) => {
252
- n.value && !n.value.contains(d.target) && (r.value = !1);
253
- }, a = I(null), o = I(null);
254
- let c = null;
255
- const r = I(!1), u = (d) => {
256
- const p = document.getElementById(d);
257
- p && p.scrollIntoView({ behavior: "smooth" }), r.value = !1;
250
+ setup(p) {
251
+ const e = p, o = k(null), i = (f) => {
252
+ o.value && !o.value.contains(f.target) && (l.value = !1);
253
+ }, a = k(null), n = k(null);
254
+ let d = null;
255
+ const l = k(!1), c = (f) => {
256
+ const g = document.getElementById(f);
257
+ g && g.scrollIntoView({ behavior: "smooth" }), l.value = !1;
258
258
  }, t = () => {
259
- if (!o.value) return;
260
- const d = e.navigationItems.map((p) => document.getElementById(p.id)).filter((p) => p !== null);
261
- c = new IntersectionObserver(
262
- (p) => {
263
- p.forEach((g) => {
264
- if (g.isIntersecting) {
265
- const f = g.target.getAttribute("id");
266
- f && (a.value = f);
259
+ if (!n.value) return;
260
+ const f = e.navigationItems.map((h) => document.getElementById(h.id)).filter((h) => h !== null), g = (window.innerHeight - 140 - 1) * -1;
261
+ d = new IntersectionObserver(
262
+ (h) => {
263
+ h.forEach((u) => {
264
+ if (u.isIntersecting) {
265
+ const m = u.target.getAttribute("id");
266
+ m && (a.value = m);
267
267
  }
268
268
  });
269
269
  },
270
270
  {
271
- rootMargin: "0px 0px -40% 0px",
272
- // When the 40% of the content is in the viewport the menu will be highlighted
273
- threshold: Array.from({ length: 99 }, (p, g) => (g + 2) / 100)
271
+ rootMargin: `-120px 0px ${g}px 0px`,
272
+ threshold: Array.from({ length: 99 }, (h, u) => (u + 2) / 100)
274
273
  }
275
- ), d.forEach((p) => c == null ? void 0 : c.observe(p));
274
+ ), f.forEach((h) => d == null ? void 0 : d.observe(h));
276
275
  };
277
- return W(() => {
278
- document.addEventListener("click", l), oe(() => {
279
- t();
280
- });
281
- }), Q(() => {
282
- c && c.disconnect(), document.removeEventListener("click", l);
283
- }), (d, p) => (s(), i("div", {
284
- class: m([
276
+ return P(() => {
277
+ t(), document.addEventListener("click", i);
278
+ }), J(() => {
279
+ d && d.disconnect(), document.removeEventListener("click", i);
280
+ }), (f, g) => (s(), r("div", {
281
+ class: _([
285
282
  "side-navigation-layout",
286
283
  `side-navigation-layout--${e.position}`,
287
284
  { "side-navigation--dark": e.darkMode }
288
285
  ])
289
286
  }, [
290
- h("div", {
287
+ v("div", {
291
288
  ref_key: "dropdownRef",
292
- ref: n,
289
+ ref: o,
293
290
  class: "side-navigation-dropdown"
294
291
  }, [
295
- h("button", {
292
+ v("button", {
296
293
  class: "dropdown-toggle",
297
- onClick: p[0] || (p[0] = (g) => r.value = !r.value)
294
+ onClick: g[0] || (g[0] = (h) => l.value = !l.value)
298
295
  }, [
299
- p[1] || (p[1] = h("span", null, "Jump to a section", -1)),
300
- k(P, {
301
- icon: r.value ? G(Y) : G(x),
296
+ g[1] || (g[1] = v("span", null, "Jump to a section", -1)),
297
+ y(R, {
298
+ icon: l.value ? G(X) : G(Y),
302
299
  color: "black",
303
300
  size: "sm"
304
301
  }, null, 8, ["icon"])
305
302
  ]),
306
- r.value ? (s(), i("ul", Te, [
307
- (s(!0), i(T, null, z(e.navigationItems, (g) => (s(), i("li", {
308
- key: g.id,
303
+ l.value ? (s(), r("ul", Ne, [
304
+ (s(!0), r(T, null, z(e.navigationItems, (h) => (s(), r("li", {
305
+ key: h.id,
309
306
  class: "dropdown-item"
310
307
  }, [
311
- h("a", {
308
+ v("a", {
312
309
  href: "#",
313
310
  class: "dropdown-link",
314
- onClick: Z((f) => u(g.id), ["prevent"])
315
- }, L(g.text), 9, ze)
311
+ onClick: q((u) => c(h.id), ["prevent"])
312
+ }, w(h.text), 9, Te)
316
313
  ]))), 128))
317
314
  ])) : M("", !0)
318
315
  ], 512),
319
- h("nav", Ee, [
320
- h("ul", null, [
321
- (s(!0), i(T, null, z(e.navigationItems, (g) => (s(), i("li", {
322
- key: g.id,
316
+ v("nav", ze, [
317
+ v("ul", null, [
318
+ (s(!0), r(T, null, z(e.navigationItems, (h) => (s(), r("li", {
319
+ key: h.id,
323
320
  class: "side-navigation__item"
324
321
  }, [
325
- h("a", {
322
+ v("a", {
326
323
  href: "#",
327
- class: m(["side-navigation__link", { "side-navigation__link--active": a.value === g.id }]),
328
- "data-ga-name": g.text,
324
+ class: _(["side-navigation__link", { "side-navigation__link--active": a.value === h.id }]),
325
+ "data-ga-name": h.text,
329
326
  "data-ga-location": "side anchor",
330
- onClick: Z((f) => u(g.id), ["prevent"])
331
- }, L(g.text), 11, Ve)
327
+ onClick: q((u) => c(h.id), ["prevent"])
328
+ }, w(h.text), 11, Me)
332
329
  ]))), 128))
333
330
  ])
334
331
  ]),
335
- h("div", {
332
+ v("div", {
336
333
  ref_key: "slotContentRef",
337
- ref: o,
334
+ ref: n,
338
335
  class: "side-navigation-content"
339
336
  }, [
340
- b(d.$slots, "default", {}, void 0, !0)
337
+ b(f.$slots, "default", {}, void 0, !0)
341
338
  ], 512)
342
339
  ], 2));
343
340
  }
344
- }), Nt = /* @__PURE__ */ w(Me, [["__scopeId", "data-v-68f8d83f"]]), Ge = ["for"], Be = ["name", "value", "id", "checked", "disabled"], Oe = /* @__PURE__ */ C({
341
+ }), Tt = /* @__PURE__ */ S(Ee, [["__scopeId", "data-v-76494345"]]), Ge = ["for"], Be = ["name", "value", "id", "checked", "disabled"], Ve = /* @__PURE__ */ L({
345
342
  __name: "SlpRadioButton",
346
343
  props: {
347
344
  option: {},
@@ -349,32 +346,32 @@ const It = /* @__PURE__ */ w(Se, [["render", Ce], ["__scopeId", "data-v-adc8d02f
349
346
  config: {}
350
347
  },
351
348
  emits: ["update:modelValue"],
352
- setup(v, { emit: e }) {
353
- const n = e, l = (a) => {
354
- const o = a.target;
355
- n("update:modelValue", o.value);
349
+ setup(p, { emit: e }) {
350
+ const o = e, i = (a) => {
351
+ const n = a.target;
352
+ o("update:modelValue", n.value);
356
353
  };
357
- return (a, o) => {
358
- var c, r, u;
359
- return s(), i("label", {
354
+ return (a, n) => {
355
+ var d, l, c;
356
+ return s(), r("label", {
360
357
  for: a.option,
361
- class: m(["slp-radio", { disabled: (c = a.config) == null ? void 0 : c.disabled }])
358
+ class: _(["slp-radio", { disabled: (d = a.config) == null ? void 0 : d.disabled }])
362
359
  }, [
363
- B(L(a.option) + " ", 1),
364
- h("input", {
360
+ B(w(a.option) + " ", 1),
361
+ v("input", {
365
362
  type: "radio",
366
363
  name: a.name,
367
364
  value: a.option,
368
365
  id: a.option,
369
- onInput: l,
370
- checked: (r = a.config) == null ? void 0 : r.checked,
371
- disabled: (u = a.config) == null ? void 0 : u.disabled
366
+ onInput: i,
367
+ checked: (l = a.config) == null ? void 0 : l.checked,
368
+ disabled: (c = a.config) == null ? void 0 : c.disabled
372
369
  }, null, 40, Be),
373
- o[0] || (o[0] = h("span", { class: "slp-radio__checkmark" }, null, -1))
370
+ n[0] || (n[0] = v("span", { class: "slp-radio__checkmark" }, null, -1))
374
371
  ], 10, Ge);
375
372
  };
376
373
  }
377
- }), Re = /* @__PURE__ */ w(Oe, [["__scopeId", "data-v-f37e970e"]]), Pe = /* @__PURE__ */ C({
374
+ }), Oe = /* @__PURE__ */ S(Ve, [["__scopeId", "data-v-f37e970e"]]), Re = /* @__PURE__ */ L({
378
375
  __name: "SlpRadioButtonGroup",
379
376
  props: {
380
377
  options: {},
@@ -385,29 +382,29 @@ const It = /* @__PURE__ */ w(Se, [["render", Ce], ["__scopeId", "data-v-adc8d02f
385
382
  } }
386
383
  },
387
384
  emits: ["update:modelValue"],
388
- setup(v, { emit: e }) {
389
- const n = {
385
+ setup(p, { emit: e }) {
386
+ const o = {
390
387
  VERTICAL: "vertical",
391
388
  HORIZONTAL: "horizontal"
392
- }, l = e, a = (o) => {
393
- l("update:modelValue", o);
389
+ }, i = e, a = (n) => {
390
+ i("update:modelValue", n);
394
391
  };
395
- return (o, c) => {
396
- var r, u;
397
- return s(), R(te, {
398
- class: m(["slp-radio-group", {
399
- "slp-radio-group--vertical": ((r = o.config) == null ? void 0 : r.orientation) === n.VERTICAL,
400
- "slp-radio-group--horizontal": ((u = o.config) == null ? void 0 : u.orientation) === n.HORIZONTAL
392
+ return (n, d) => {
393
+ var l, c;
394
+ return s(), O(ee, {
395
+ class: _(["slp-radio-group", {
396
+ "slp-radio-group--vertical": ((l = n.config) == null ? void 0 : l.orientation) === o.VERTICAL,
397
+ "slp-radio-group--horizontal": ((c = n.config) == null ? void 0 : c.orientation) === o.HORIZONTAL
401
398
  }])
402
399
  }, {
403
400
  default: N(() => [
404
- (s(!0), i(T, null, z(o.options, (t) => (s(), R(Re, {
401
+ (s(!0), r(T, null, z(n.options, (t) => (s(), O(Oe, {
405
402
  key: t.value,
406
403
  option: t.value,
407
- name: o.name,
404
+ name: n.name,
408
405
  config: {
409
406
  ...t.config,
410
- checked: t.value === o.modelValue
407
+ checked: t.value === n.modelValue
411
408
  },
412
409
  "onUpdate:modelValue": a
413
410
  }, null, 8, ["option", "name", "config"]))), 128))
@@ -416,26 +413,26 @@ const It = /* @__PURE__ */ w(Se, [["render", Ce], ["__scopeId", "data-v-adc8d02f
416
413
  }, 8, ["class"]);
417
414
  };
418
415
  }
419
- }), Tt = /* @__PURE__ */ w(Pe, [["__scopeId", "data-v-ae31ec89"]]), Ae = {
416
+ }), zt = /* @__PURE__ */ S(Re, [["__scopeId", "data-v-ae31ec89"]]), Ae = {
420
417
  key: 0,
421
418
  class: "slp-loading-round"
422
- }, De = {
419
+ }, Fe = {
423
420
  key: 1,
424
421
  class: "slp-loading-linear"
425
- }, We = /* @__PURE__ */ C({
422
+ }, Pe = /* @__PURE__ */ L({
426
423
  name: "SlpLoader",
427
424
  __name: "SlpLoader",
428
425
  props: {
429
426
  config: {}
430
427
  },
431
- setup(v) {
432
- const e = v;
433
- return (n, l) => {
428
+ setup(p) {
429
+ const e = p;
430
+ return (o, i) => {
434
431
  var a;
435
- return ((a = e.config) == null ? void 0 : a.variant) === "round" ? (s(), i("div", Ae)) : (s(), i("div", De));
432
+ return ((a = e.config) == null ? void 0 : a.variant) === "round" ? (s(), r("div", Ae)) : (s(), r("div", Fe));
436
433
  };
437
434
  }
438
- }), zt = /* @__PURE__ */ w(We, [["__scopeId", "data-v-ee32411b"]]), qe = ["href", "data-ga-name", "data-ga-location"], He = /* @__PURE__ */ C({
435
+ }), Mt = /* @__PURE__ */ S(Pe, [["__scopeId", "data-v-ee32411b"]]), De = ["href", "data-ga-name", "data-ga-location"], We = /* @__PURE__ */ L({
439
436
  __name: "Tree",
440
437
  props: {
441
438
  text: { default: "" },
@@ -449,119 +446,119 @@ const It = /* @__PURE__ */ w(Se, [["render", Ce], ["__scopeId", "data-v-adc8d02f
449
446
  mobile: !1
450
447
  }) }
451
448
  },
452
- setup(v) {
453
- return (e, n) => {
454
- var a, o, c, r, u, t;
455
- const l = se("Tree", !0);
456
- return s(), i("div", {
457
- class: m([`depth-${(a = e.config) == null ? void 0 : a.depth}`, { mobile: (o = e.config) == null ? void 0 : o.mobile }])
449
+ setup(p) {
450
+ return (e, o) => {
451
+ var a, n, d, l, c, t;
452
+ const i = ne("Tree", !0);
453
+ return s(), r("div", {
454
+ class: _([`depth-${(a = e.config) == null ? void 0 : a.depth}`, { mobile: (n = e.config) == null ? void 0 : n.mobile }])
458
455
  }, [
459
- e.text ? (s(), i("a", {
456
+ e.text ? (s(), r("a", {
460
457
  key: 0,
461
- class: m(["anchor", { selected: (c = e.config) == null ? void 0 : c.isSelected }]),
462
- href: (r = e.config) == null ? void 0 : r.href,
463
- "data-ga-name": (u = e.config) == null ? void 0 : u.dataGaName,
458
+ class: _(["anchor", { selected: (d = e.config) == null ? void 0 : d.isSelected }]),
459
+ href: (l = e.config) == null ? void 0 : l.href,
460
+ "data-ga-name": (c = e.config) == null ? void 0 : c.dataGaName,
464
461
  "data-ga-location": (t = e.config) == null ? void 0 : t.dataGaLocation
465
- }, L(e.text), 11, qe)) : M("", !0),
466
- (s(!0), i(T, null, z(e.nodes, (d) => {
467
- var p, g, f, _, S, $;
468
- return s(), R(l, {
469
- key: d.text,
470
- nodes: d.nodes,
471
- text: d.text,
462
+ }, w(e.text), 11, De)) : M("", !0),
463
+ (s(!0), r(T, null, z(e.nodes, (f) => {
464
+ var g, h, u, m, I, C;
465
+ return s(), O(i, {
466
+ key: f.text,
467
+ nodes: f.nodes,
468
+ text: f.text,
472
469
  config: {
473
- href: ((p = d.config) == null ? void 0 : p.href) ?? "",
474
- dataGaName: (g = d.config) == null ? void 0 : g.dataGaName,
475
- dataGaLocation: (f = d.config) == null ? void 0 : f.dataGaLocation,
476
- depth: (((_ = e.config) == null ? void 0 : _.depth) ?? 0) + 1,
477
- isSelected: (S = d.config) == null ? void 0 : S.isSelected,
478
- mobile: ($ = e.config) == null ? void 0 : $.mobile
470
+ href: ((g = f.config) == null ? void 0 : g.href) ?? "",
471
+ dataGaName: (h = f.config) == null ? void 0 : h.dataGaName,
472
+ dataGaLocation: (u = f.config) == null ? void 0 : u.dataGaLocation,
473
+ depth: (((m = e.config) == null ? void 0 : m.depth) ?? 0) + 1,
474
+ isSelected: (I = f.config) == null ? void 0 : I.isSelected,
475
+ mobile: (C = e.config) == null ? void 0 : C.mobile
479
476
  }
480
477
  }, null, 8, ["nodes", "text", "config"]);
481
478
  }), 128))
482
479
  ], 2);
483
480
  };
484
481
  }
485
- }), ae = /* @__PURE__ */ w(He, [["__scopeId", "data-v-c3be63ed"]]), Ue = { class: "dropdown__list" }, Ke = { class: "horizontal-rule slp-my-16" }, je = /* @__PURE__ */ C({
482
+ }), te = /* @__PURE__ */ S(We, [["__scopeId", "data-v-c3be63ed"]]), He = { class: "dropdown__list" }, qe = { class: "horizontal-rule slp-my-16" }, Ue = /* @__PURE__ */ L({
486
483
  __name: "SlpAnchorDropdown",
487
484
  props: {
488
485
  dropdownLabel: { default: "Jump to a section" },
489
486
  anchors: {},
490
487
  hyperlinks: {}
491
488
  },
492
- setup(v) {
493
- const e = I(!1), n = () => {
489
+ setup(p) {
490
+ const e = k(!1), o = () => {
494
491
  e.value = !e.value;
495
492
  };
496
- return (l, a) => {
497
- var o, c, r;
498
- return s(), i("div", {
499
- class: m(["dropdown", { hide: !e.value }])
493
+ return (i, a) => {
494
+ var n, d, l;
495
+ return s(), r("div", {
496
+ class: _(["dropdown", { hide: !e.value }])
500
497
  }, [
501
- k(K, {
498
+ y(W, {
502
499
  class: "dropdown__button",
503
500
  variant: "ghost",
504
- onClick: n
501
+ onClick: o
505
502
  }, {
506
503
  default: N(() => [
507
- h("span", null, L(l.dropdownLabel), 1),
508
- k(P, {
509
- icon: e.value ? G(Y) : G(x)
504
+ v("span", null, w(i.dropdownLabel), 1),
505
+ y(R, {
506
+ icon: e.value ? G(X) : G(Y)
510
507
  }, null, 8, ["icon"])
511
508
  ]),
512
509
  _: 1
513
510
  }),
514
- h("div", Ue, [
515
- D(k(A, {
511
+ v("div", He, [
512
+ F(y(A, {
516
513
  tag: "div",
517
514
  variant: "body3-bold",
518
515
  class: "nav-heading"
519
516
  }, {
520
517
  default: N(() => [
521
- B(L(l.anchors.text), 1)
518
+ B(w(i.anchors.text), 1)
522
519
  ]),
523
520
  _: 1
524
521
  }, 512), [
525
- [U, l.anchors.text]
522
+ [D, i.anchors.text]
526
523
  ]),
527
- k(ae, {
524
+ y(te, {
528
525
  mobile: "",
529
- nodes: l.anchors.data,
530
- onClick: n
526
+ nodes: i.anchors.data,
527
+ onClick: o
531
528
  }, null, 8, ["nodes"]),
532
- D(h("div", Ke, null, 512), [
533
- [U, (o = l.hyperlinks) == null ? void 0 : o.data.length]
529
+ F(v("div", qe, null, 512), [
530
+ [D, (n = i.hyperlinks) == null ? void 0 : n.data.length]
534
531
  ]),
535
- D(k(A, {
532
+ F(y(A, {
536
533
  tag: "div",
537
534
  variant: "body3-bold",
538
535
  class: "nav-heading"
539
536
  }, {
540
537
  default: N(() => {
541
- var u;
538
+ var c;
542
539
  return [
543
- B(L((u = l.hyperlinks) == null ? void 0 : u.text), 1)
540
+ B(w((c = i.hyperlinks) == null ? void 0 : c.text), 1)
544
541
  ];
545
542
  }),
546
543
  _: 1
547
544
  }, 512), [
548
- [U, (c = l.hyperlinks) == null ? void 0 : c.text]
545
+ [D, (d = i.hyperlinks) == null ? void 0 : d.text]
549
546
  ]),
550
- h("ul", null, [
551
- (s(!0), i(T, null, z((r = l.hyperlinks) == null ? void 0 : r.data, (u) => (s(), i("li", {
552
- key: u.text
547
+ v("ul", null, [
548
+ (s(!0), r(T, null, z((l = i.hyperlinks) == null ? void 0 : l.data, (c) => (s(), r("li", {
549
+ key: c.text
553
550
  }, [
554
- k(K, {
551
+ y(W, {
555
552
  class: "dropdown__link",
556
553
  variant: "ghost",
557
- href: u.config.href
554
+ href: c.config.href
558
555
  }, {
559
556
  default: N(() => [
560
- h("span", null, L(u.text), 1),
561
- k(K, { variant: "icon" }, {
557
+ v("span", null, w(c.text), 1),
558
+ y(W, { variant: "icon" }, {
562
559
  default: N(() => [
563
- k(P, {
564
- icon: G(ee),
560
+ y(R, {
561
+ icon: G(x),
565
562
  size: "xs"
566
563
  }, null, 8, ["icon"])
567
564
  ]),
@@ -576,107 +573,107 @@ const It = /* @__PURE__ */ w(Se, [["render", Ce], ["__scopeId", "data-v-adc8d02f
576
573
  ], 2);
577
574
  };
578
575
  }
579
- }), Ze = /* @__PURE__ */ w(je, [["__scopeId", "data-v-9b690a76"]]), Fe = { key: 0 }, Je = {
576
+ }), je = /* @__PURE__ */ S(Ue, [["__scopeId", "data-v-9b690a76"]]), Ze = { key: 0 }, Je = {
580
577
  key: 1,
581
578
  id: "collapsible-sidebar-wrapper"
582
- }, Qe = { id: "collapsible-sidebar-content" }, Xe = { id: "collapsible-sidebar" }, Ye = { class: "anchors" }, xe = /* @__PURE__ */ C({
579
+ }, Ke = { id: "collapsible-sidebar-content" }, Qe = { id: "collapsible-sidebar" }, Xe = { class: "anchors" }, Ye = /* @__PURE__ */ L({
583
580
  __name: "SlpSideNavigationWithTree",
584
581
  props: {
585
582
  anchors: {},
586
- hyperlinks: {},
587
- alwaysExpanded: { type: Boolean }
583
+ hyperlinks: {}
588
584
  },
589
- setup(v) {
590
- const e = v, n = I([]), l = I(
591
- e.anchors.data.map((f) => ({
592
- text: f.text,
593
- nodes: f.nodes,
594
- config: {
595
- href: f.config.href,
596
- dataGaName: f.config.dataGaName,
597
- dataGaLocation: f.config.dataGaLocation,
598
- depth: 0,
599
- mobile: !1
600
- }
601
- }))
602
- ), a = I(!1), o = I(!0);
603
- let c = null;
604
- const r = (f, _ = []) => (f.forEach((S) => {
605
- S.config.href && _.push(S.config.href), S.nodes && r(S.nodes, _);
606
- }), _), u = (f) => {
607
- const _ = [], S = ($) => $.some((E, V) => (_.push(V), E.config.href === f || E.nodes && S(E.nodes) ? !0 : (_.pop(), !1)));
608
- return S(e.anchors.data), _;
609
- }, t = (f) => {
610
- let _ = 0;
611
- const S = ($, E, V) => {
612
- const O = {
613
- text: $.text,
585
+ setup(p) {
586
+ const e = p, o = k([]), i = k(e.anchors.data.map((u) => ({
587
+ text: u.text,
588
+ nodes: u.nodes,
589
+ config: {
590
+ href: u.config.href,
591
+ dataGaName: u.config.dataGaName,
592
+ dataGaLocation: u.config.dataGaLocation,
593
+ depth: 0,
594
+ mobile: !1
595
+ }
596
+ }))), a = k(!1), n = k(!0);
597
+ let d = null;
598
+ const l = (u, m = []) => (u.forEach((I) => {
599
+ I.config.href && m.push(I.config.href), I.nodes && l(I.nodes, m);
600
+ }), m), c = (u) => {
601
+ const m = [], I = (C) => C.some((E, V) => (m.push(V), E.config.href === u || E.nodes && I(E.nodes) ? !0 : (m.pop(), !1)));
602
+ return I(e.anchors.data), m;
603
+ }, t = (u) => {
604
+ let m = 0;
605
+ const I = (C, E) => {
606
+ const V = {
607
+ text: C.text,
614
608
  config: {
615
- href: $.config.href,
616
- dataGaName: $.config.dataGaName,
617
- dataGaLocation: $.config.dataGaLocation
609
+ href: C.config.href,
610
+ dataGaName: C.config.dataGaName,
611
+ dataGaLocation: C.config.dataGaLocation
618
612
  }
619
613
  };
620
- return f && E === 0 && (O.config.isSelected = !0), e.alwaysExpanded ? (n.value[V] === E && (O.config.isSelected = !0), $.nodes && (O.nodes = $.nodes.map(
621
- (q, H) => S(q, H, V + 1)
622
- ))) : n.value[V] === E && ($.nodes && (V += 1, O.nodes = $.nodes.map(
623
- (q, H) => S(q, H, V)
624
- ), V -= 1), V + 1 === n.value.length && (O.config.isSelected = !0)), O;
614
+ return u && E === 0 && (V.config.isSelected = !0), o.value[m] === E && (C.nodes && (m += 1, V.nodes = C.nodes.map(
615
+ (ae, oe) => I(ae, oe)
616
+ ), m -= 1), m + 1 === o.value.length && (V.config.isSelected = !0)), V;
625
617
  };
626
- return e.anchors.data.map(($, E) => S($, E, _));
627
- }, d = (f) => {
628
- f.forEach((_) => {
629
- _.isIntersecting ? (n.value = u(`#${_.target.id}`), e.alwaysExpanded || (l.value = t(!1))) : o.value && !e.alwaysExpanded && (l.value = t(!0), o.value = !1), e.alwaysExpanded && (l.value = t(!1));
618
+ return e.anchors.data.map(
619
+ (C, E) => I(C, E)
620
+ );
621
+ }, f = (u) => {
622
+ u.forEach((m) => {
623
+ m.isIntersecting ? (o.value = c(`#${m.target.id}`), i.value = t(!1)) : n.value && (i.value = t(!0), n.value = !1);
630
624
  });
631
- }, p = () => {
632
- a.value = window.innerWidth < 768;
633
625
  }, g = () => {
634
- l.value = t(!0), o.value = !1;
635
- const f = (window.innerHeight - 120 - 48) * -1;
636
- c = new IntersectionObserver(d, {
637
- rootMargin: `-120px 0px ${f}px 0px`,
638
- threshold: 0
639
- }), setTimeout(() => {
640
- r(e.anchors.data).forEach((S) => {
641
- const $ = document.querySelector(S);
642
- $ && (c == null || c.observe($));
626
+ a.value = window.innerWidth < 768;
627
+ }, h = () => {
628
+ i.value = t(!0), n.value = !1;
629
+ const u = (window.innerHeight - 120 - 48) * -1;
630
+ d = new IntersectionObserver(
631
+ f,
632
+ {
633
+ rootMargin: `-120px 0px ${u}px 0px`,
634
+ threshold: 0
635
+ }
636
+ ), setTimeout(() => {
637
+ l(e.anchors.data).forEach((I) => {
638
+ const C = document.querySelector(I);
639
+ C && (d == null || d.observe(C));
643
640
  });
644
641
  }, 0);
645
642
  };
646
- return W(() => {
647
- p(), window.addEventListener("resize", p), g();
648
- }), Q(() => {
649
- window.removeEventListener("resize", p), c && c.disconnect();
650
- }), (f, _) => (s(), i("div", null, [
651
- a.value ? (s(), i("div", Fe, [
652
- k(Ze, ne(le({ anchors: f.anchors, hyperlinks: f.hyperlinks })), null, 16),
653
- b(f.$slots, "default", {}, void 0, !0)
654
- ])) : (s(), i("div", Je, [
655
- h("div", Qe, [
656
- b(f.$slots, "default", {}, void 0, !0)
643
+ return P(() => {
644
+ g(), window.addEventListener("resize", g), h();
645
+ }), J(() => {
646
+ window.removeEventListener("resize", g), d && d.disconnect();
647
+ }), (u, m) => (s(), r("div", null, [
648
+ a.value ? (s(), r("div", Ze, [
649
+ y(je, se(le({ anchors: u.anchors, hyperlinks: u.hyperlinks })), null, 16),
650
+ b(u.$slots, "default", {}, void 0, !0)
651
+ ])) : (s(), r("div", Je, [
652
+ v("div", Ke, [
653
+ b(u.$slots, "default", {}, void 0, !0)
657
654
  ]),
658
- h("nav", Xe, [
659
- b(f.$slots, "header", {}, void 0, !0),
660
- h("div", Ye, [
661
- f.anchors.text ? (s(), R(A, {
655
+ v("nav", Qe, [
656
+ b(u.$slots, "header", {}, void 0, !0),
657
+ v("div", Xe, [
658
+ u.anchors.text ? (s(), O(A, {
662
659
  key: 0,
663
660
  tag: "div",
664
661
  variant: "body3-bold",
665
662
  class: "nav-heading"
666
663
  }, {
667
664
  default: N(() => [
668
- B(L(f.anchors.text), 1)
665
+ B(w(u.anchors.text), 1)
669
666
  ]),
670
667
  _: 1
671
668
  })) : M("", !0),
672
- k(ae, { nodes: l.value }, null, 8, ["nodes"])
669
+ y(te, { nodes: i.value }, null, 8, ["nodes"])
673
670
  ]),
674
- b(f.$slots, "footer", {}, void 0, !0)
671
+ b(u.$slots, "footer", {}, void 0, !0)
675
672
  ])
676
673
  ]))
677
674
  ]));
678
675
  }
679
- }), Et = /* @__PURE__ */ w(xe, [["__scopeId", "data-v-47e57dda"]]), et = ["id", "aria-describedby"], tt = { class: "slp-tooltip__wrapper" }, at = ["id", "data-ga-features", "data-ga-features-sub", "data-ga-features-sub-card", "data-ga-name", "data-ga-location", "href"], ot = ["id"], st = ["id", "aria-describedby"], nt = { class: "slp-tooltip__wrapper" }, lt = ["id", "innerHTML"], it = ["id"], rt = /* @__PURE__ */ C({
676
+ }), Et = /* @__PURE__ */ S(Ye, [["__scopeId", "data-v-9319fd2e"]]), xe = ["id", "aria-describedby"], et = { class: "slp-tooltip__wrapper" }, tt = ["id", "data-ga-features", "data-ga-features-sub", "data-ga-features-sub-card", "data-ga-name", "data-ga-location", "href"], at = ["id"], ot = ["id", "aria-describedby"], nt = { class: "slp-tooltip__wrapper" }, st = ["id", "innerHTML"], lt = ["id"], it = /* @__PURE__ */ L({
680
677
  __name: "SlpTooltip",
681
678
  props: {
682
679
  text: { default: "" },
@@ -686,299 +683,318 @@ const It = /* @__PURE__ */ w(Se, [["render", Ce], ["__scopeId", "data-v-adc8d02f
686
683
  id: { default: "" },
687
684
  dataProperties: { default: null }
688
685
  },
689
- setup(v) {
690
- const e = v, n = I(!1), l = I(""), a = I(""), o = I(""), c = (t) => {
691
- e.mode === "hover" && (n.value = t.type === "mouseenter");
692
- }, r = () => {
693
- n.value = e.mode === "click" ? !n.value : !1;
694
- }, u = (t) => {
695
- t.target.id !== e.id && (n.value = !1);
686
+ setup(p) {
687
+ const e = p, o = k(!1), i = k(""), a = k(""), n = k(""), d = (t) => {
688
+ e.mode === "hover" && (o.value = t.type === "mouseenter");
689
+ }, l = () => {
690
+ o.value = e.mode === "click";
691
+ }, c = (t) => {
692
+ t.target.id !== e.id && (o.value = !1);
696
693
  };
697
- return W(() => {
698
- if (e.mode === "click" && document.addEventListener("click", u), e.text) {
699
- const t = e.text.match(/\[(.*?)\]/), d = e.text.match(/\((.*?)\)/);
700
- l.value = t ? t[1] : "", a.value = d ? d[1] : "", o.value = e.text.replace(`(${a.value})`, "").replace(`[${l.value}]`, "").trim();
694
+ return P(() => {
695
+ if (e.mode === "click" && document.addEventListener("click", c), e.text) {
696
+ const t = e.text.match(/\[(.*?)\]/), f = e.text.match(/\((.*?)\)/);
697
+ i.value = t ? t[1] : "", a.value = f ? f[1] : "", n.value = e.text.replace(`(${a.value})`, "").replace(`[${i.value}]`, "").trim();
701
698
  }
702
- }), X(() => {
703
- document.removeEventListener("click", u);
704
- }), (t, d) => {
705
- var p, g, f;
706
- return t.mode === "hover" ? (s(), i("div", {
699
+ }), K(() => {
700
+ document.removeEventListener("click", c);
701
+ }), (t, f) => {
702
+ var g, h, u;
703
+ return t.mode === "hover" ? (s(), r("div", {
707
704
  key: 0,
708
705
  id: t.id,
709
706
  "aria-label": "Click to open tooltip with more information.",
710
707
  "aria-describedby": `${t.id}-content`,
711
708
  class: "slp-tooltip",
712
- onMouseenter: c,
713
- onMouseleave: c,
714
- onClick: r
709
+ onMouseenter: d,
710
+ onMouseleave: d,
711
+ onClick: l
715
712
  }, [
716
- h("div", tt, [
713
+ v("div", et, [
717
714
  b(t.$slots, "default", {}, void 0, !0),
718
- n.value ? (s(), i("div", {
715
+ o.value ? (s(), r("div", {
719
716
  key: 0,
720
- class: m(["slp-tooltip__content", `${t.position} ${t.mode === "hover" ? "hover-mode" : ""}`])
717
+ class: _(["slp-tooltip__content", `${t.position} ${t.mode === "hover" ? "hover-mode" : ""}`])
721
718
  }, [
722
- B(L(o.value) + " ", 1),
723
- t.text ? (s(), i("a", {
719
+ B(w(n.value) + " ", 1),
720
+ t.text ? (s(), r("a", {
724
721
  key: 0,
725
722
  id: `${t.id}-content`,
726
723
  "data-ga-features": t.dataProperties && t.dataProperties.features.toLowerCase() || null,
727
- "data-ga-features-sub": (p = t.dataProperties) == null ? void 0 : p.sub,
728
- "data-ga-features-sub-card": (g = t.dataProperties) == null ? void 0 : g.card,
729
- "data-ga-name": (f = t.dataProperties) == null ? void 0 : f.plan,
724
+ "data-ga-features-sub": (g = t.dataProperties) == null ? void 0 : g.sub,
725
+ "data-ga-features-sub-card": (h = t.dataProperties) == null ? void 0 : h.card,
726
+ "data-ga-name": (u = t.dataProperties) == null ? void 0 : u.plan,
730
727
  "data-ga-location": t.dataProperties ? "features content" : null,
731
728
  role: "tooltip",
732
729
  href: a.value
733
- }, L(l.value), 9, at)) : t.list ? (s(), i("ul", {
730
+ }, w(i.value), 9, tt)) : t.list ? (s(), r("ul", {
734
731
  key: 1,
735
732
  id: `${t.id}-content`,
736
733
  role: "tooltip",
737
734
  class: "slp-tooltip__list"
738
735
  }, [
739
- (s(!0), i(T, null, z(t.list, (_) => (s(), i("li", {
740
- key: _.text
741
- }, L(_.text), 1))), 128))
742
- ], 8, ot)) : M("", !0)
736
+ (s(!0), r(T, null, z(t.list, (m) => (s(), r("li", {
737
+ key: m.text
738
+ }, w(m.text), 1))), 128))
739
+ ], 8, at)) : M("", !0)
743
740
  ], 2)) : M("", !0)
744
741
  ])
745
- ], 40, et)) : (s(), i("button", {
742
+ ], 40, xe)) : (s(), r("button", {
746
743
  key: 1,
747
744
  id: t.id,
748
745
  "aria-label": "Click to open tooltip with more information.",
749
746
  "aria-describedby": `${t.id}-content`,
750
- class: m(`slp-tooltip ${t.mode === "click" ? "button-mode" : ""}`),
751
- onClick: r
747
+ class: _(`slp-tooltip ${t.mode === "click" ? "button-mode" : ""}`),
748
+ onClick: l
752
749
  }, [
753
- h("div", nt, [
750
+ v("div", nt, [
754
751
  b(t.$slots, "default", {}, void 0, !0),
755
- n.value ? (s(), i("div", {
752
+ o.value ? (s(), r("div", {
756
753
  key: 0,
757
- class: m(["slp-tooltip__content", `${t.position} ${t.mode === "hover" ? "hover-mode" : ""}`])
754
+ class: _(["slp-tooltip__content", `${t.position} ${t.mode === "hover" ? "hover-mode" : ""}`])
758
755
  }, [
759
- t.text ? (s(), i("span", {
756
+ t.text ? (s(), r("span", {
760
757
  key: 0,
761
758
  id: `${t.id}-content`,
762
759
  role: "tooltip",
763
760
  innerHTML: t.text
764
- }, null, 8, lt)) : (s(), i("ul", {
761
+ }, null, 8, st)) : (s(), r("ul", {
765
762
  key: 1,
766
763
  id: `${t.id}-content`,
767
764
  role: "tooltip",
768
765
  class: "slp-tooltip__list"
769
766
  }, [
770
- (s(!0), i(T, null, z(t.list, (_) => (s(), i("li", {
771
- key: _.text
772
- }, L(_.text), 1))), 128))
773
- ], 8, it))
767
+ (s(!0), r(T, null, z(t.list, (m) => (s(), r("li", {
768
+ key: m.text
769
+ }, w(m.text), 1))), 128))
770
+ ], 8, lt))
774
771
  ], 2)) : M("", !0)
775
772
  ])
776
- ], 10, st));
773
+ ], 10, ot));
777
774
  };
778
775
  }
779
- }), dt = /* @__PURE__ */ w(rt, [["__scopeId", "data-v-1280f345"]]), ct = {
776
+ }), rt = /* @__PURE__ */ S(it, [["__scopeId", "data-v-a2668f04"]]), dt = {
780
777
  key: 0,
781
778
  class: "breadcrumb",
782
779
  vocab: "https://schema.org/",
783
780
  typeof: "BreadcrumbList"
784
- }, ut = ["onMouseenter", "onMouseleave"], pt = ["data-ga-name", "data-ga-location", "href"], vt = {
781
+ }, ct = ["onMouseenter", "onMouseleave"], ut = ["data-ga-name", "data-ga-location", "href"], pt = {
785
782
  key: 0,
786
783
  class: "breadcrumb__chevron"
787
- }, ft = ["content"], ht = {
784
+ }, ft = ["content"], vt = {
788
785
  key: 1,
789
786
  class: "breadcrumb",
790
787
  vocab: "https://schema.org/",
791
788
  typeof: "BreadcrumbList"
792
- }, gt = ["href", "data-ga-name", "data-ga-location"], mt = ["content"], _t = /* @__PURE__ */ C({
789
+ }, ht = ["href", "data-ga-name", "data-ga-location"], mt = ["content"], gt = /* @__PURE__ */ L({
793
790
  __name: "SlpBreadcrumb",
794
791
  props: {
795
792
  crumbs: { default: () => [] },
796
793
  router: {}
797
794
  },
798
- setup(v) {
799
- const e = v, n = I(e.crumbs), l = I(!1), a = (r) => {
800
- const u = r.split(" ");
801
- for (let t = 0; t < u.length; t++)
802
- u[t] = u[t][0].toUpperCase() + u[t].substr(1);
803
- return u.join(" ");
804
- }, o = () => {
805
- l.value = window.innerWidth < 768;
806
- }, c = (r) => {
807
- n.value[r] && (n.value[r] = {
808
- ...n.value[r],
809
- hover: !n.value[r].hover
795
+ setup(p) {
796
+ const e = p, o = k(e.crumbs), i = k(!1), a = (l) => {
797
+ const c = l.split(" ");
798
+ for (let t = 0; t < c.length; t++)
799
+ c[t] = c[t][0].toUpperCase() + c[t].substr(1);
800
+ return c.join(" ");
801
+ }, n = () => {
802
+ i.value = window.innerWidth < 768;
803
+ }, d = (l) => {
804
+ o.value[l] && (o.value[l] = {
805
+ ...o.value[l],
806
+ hover: !o.value[l].hover
810
807
  });
811
808
  };
812
- return ie(() => {
809
+ return Q(() => {
813
810
  if (e.router) {
814
- const r = e.router.currentRoute.path, u = r.startsWith("/") ? r.substring(1).split("/") : r.split("/"), t = [];
815
- let d = "";
816
- u.forEach((p) => {
817
- d = `${d}/${p}`;
818
- const g = e.router.match(d);
819
- g.params.slug !== null && p.length && t.push({
820
- title: a(p.replace(/-/g, " ")),
811
+ const l = e.router.currentRoute.path, c = l.startsWith("/") ? l.substring(1).split("/") : l.split("/"), t = [];
812
+ let f = "";
813
+ c.forEach((g) => {
814
+ f = `${f}/${g}`;
815
+ const h = e.router.match(f);
816
+ h.params.slug !== null && g.length && t.push({
817
+ title: a(g.replace(/-/g, " ")),
821
818
  hover: !1,
822
- ...g
819
+ ...h
823
820
  });
824
- }), n.value = t;
821
+ }), o.value = t;
825
822
  }
826
- }), W(() => {
827
- o(), window.addEventListener("resize", o);
828
- }), X(() => {
829
- window.removeEventListener("resize", o);
830
- }), (r, u) => n.value && !l.value ? (s(), i("ol", ct, [
831
- (s(!0), i(T, null, z(n.value, (t, d) => (s(), i("li", {
823
+ }), P(() => {
824
+ n(), window.addEventListener("resize", n);
825
+ }), K(() => {
826
+ window.removeEventListener("resize", n);
827
+ }), (l, c) => o.value && !i.value ? (s(), r("ol", dt, [
828
+ (s(!0), r(T, null, z(o.value, (t, f) => (s(), r("li", {
832
829
  key: t.title,
833
- class: m(["breadcrumb__crumb", {
834
- "breadcrumb__crumb--disabled": d === n.value.length - 1
830
+ class: _(["breadcrumb__crumb", {
831
+ "breadcrumb__crumb--disabled": f === o.value.length - 1
835
832
  }]),
836
833
  property: "itemListElement",
837
834
  typeof: "ListItem",
838
- onMouseenter: (p) => c(d),
839
- onMouseleave: (p) => c(d)
835
+ onMouseenter: (g) => d(f),
836
+ onMouseleave: (g) => d(f)
840
837
  }, [
841
- k(dt, {
838
+ y(rt, {
842
839
  text: t.title,
843
840
  class: "breadcrumb__crumb__tooltip",
844
841
  position: "top"
845
842
  }, {
846
843
  default: N(() => [
847
- h("a", {
844
+ v("a", {
848
845
  property: "item",
849
846
  typeof: "WebPage",
850
847
  "data-ga-name": t.dataGaName || t.title.toLowerCase(),
851
848
  "data-ga-location": t.dataGaLocation || "breadcrumb",
852
- href: d !== n.value.length - 1 ? t.path : void 0
849
+ href: f !== o.value.length - 1 ? t.path : void 0
853
850
  }, [
854
- k(A, {
851
+ y(A, {
855
852
  tag: "span",
856
853
  variant: "body3",
857
854
  property: "name"
858
855
  }, {
859
856
  default: N(() => [
860
- B(L(t.title.length > 18 ? t.title.substring(0, 18).concat("...") : t.title), 1)
857
+ B(w(t.title.length > 18 ? t.title.substring(0, 18).concat("...") : t.title), 1)
861
858
  ]),
862
859
  _: 2
863
860
  }, 1024)
864
- ], 8, pt)
861
+ ], 8, ut)
865
862
  ]),
866
863
  _: 2
867
864
  }, 1032, ["text"]),
868
- d !== n.value.length - 1 ? (s(), i("span", vt, [
869
- k(P, {
865
+ f !== o.value.length - 1 ? (s(), r("span", pt, [
866
+ y(R, {
870
867
  color: "accent-500",
871
868
  size: "xs",
872
- icon: G(ee)
869
+ icon: G(x)
873
870
  }, null, 8, ["icon"])
874
871
  ])) : M("", !0),
875
- h("meta", {
872
+ v("meta", {
876
873
  property: "position",
877
- content: d + 1
874
+ content: f + 1
878
875
  }, null, 8, ft)
879
- ], 42, ut))), 128))
880
- ])) : n.value && l.value ? (s(), i("ol", ht, [
881
- (s(!0), i(T, null, z(n.value, (t) => (s(), i("li", {
876
+ ], 42, ct))), 128))
877
+ ])) : o.value && i.value ? (s(), r("ol", vt, [
878
+ (s(!0), r(T, null, z(o.value, (t) => (s(), r("li", {
882
879
  key: t.title,
883
880
  class: "breadcrumb__crumb breadcrumb__crumb--mobile",
884
881
  property: "itemListElement",
885
882
  typeof: "ListItem"
886
883
  }, [
887
- h("a", {
884
+ v("a", {
888
885
  class: "slp-flex slp-align-items-center",
889
- href: n.value[n.value.length - 2].path,
886
+ href: o.value[o.value.length - 2].path,
890
887
  "data-ga-name": t.dataGaName || t.title.toLowerCase(),
891
888
  "data-ga-location": t.dataGaLocation || "breadcrumb",
892
889
  property: "item",
893
890
  typeof: "WebPage"
894
891
  }, [
895
- h("span", null, [
896
- k(P, {
892
+ v("span", null, [
893
+ y(R, {
897
894
  color: "accent-500",
898
895
  size: "xs",
899
- icon: G(de)
896
+ icon: G(re)
900
897
  }, null, 8, ["icon"])
901
898
  ]),
902
- k(A, {
899
+ y(A, {
903
900
  class: "slp-ml-8",
904
901
  tag: "span",
905
902
  variant: "body2",
906
903
  property: "name"
907
904
  }, {
908
905
  default: N(() => [
909
- B(L(n.value[n.value.length - 2].title), 1)
906
+ B(w(o.value[o.value.length - 2].title), 1)
910
907
  ]),
911
908
  _: 1
912
909
  })
913
- ], 8, gt),
914
- h("meta", {
910
+ ], 8, ht),
911
+ v("meta", {
915
912
  property: "position",
916
- content: n.value.length - 1
913
+ content: o.value.length - 1
917
914
  }, null, 8, mt)
918
915
  ]))), 128))
919
916
  ])) : M("", !0);
920
917
  }
921
- }), Vt = /* @__PURE__ */ w(_t, [["__scopeId", "data-v-fd412793"]]), bt = ["value"], yt = {
922
- key: 1,
923
- class: "dropdown"
924
- }, $t = /* @__PURE__ */ C({
918
+ }), Gt = /* @__PURE__ */ S(gt, [["__scopeId", "data-v-fd412793"]]), _t = { class: "dropdown" }, bt = ["aria-label", "name"], yt = ["value", "name"], $t = ["value", "name"], kt = /* @__PURE__ */ L({
925
919
  __name: "SlpDropdown",
926
920
  props: {
927
- modelValue: {},
921
+ name: {},
928
922
  options: {},
929
- labelKey: {},
930
- valueKey: {}
923
+ textField: { default: void 0 },
924
+ valueField: { default: void 0 },
925
+ value: { type: [String, Object, Number, Boolean], default: void 0 },
926
+ dropdownLabel: { default: void 0 },
927
+ config: { default: {
928
+ primitive: !0
929
+ } }
931
930
  },
932
- emits: ["update:modelValue"],
933
- setup(v, { emit: e }) {
934
- const n = v, l = e, a = (r, u) => {
935
- if (typeof r == "object" && r !== null) {
936
- if (!u) {
937
- const p = Object.keys(r)[0];
938
- return r[p];
931
+ emits: ["input"],
932
+ setup(p, { emit: e }) {
933
+ const o = p, i = e, a = k(o.value), n = k(!0);
934
+ Q(() => {
935
+ var l;
936
+ if (n.value = !o.options.every(
937
+ (c) => typeof c == "object"
938
+ ), !n.value && !(o.textField && o.valueField))
939
+ throw new Error(
940
+ "The 'options' prop is an Array of Objects and textField nor the ValueField have been specified"
941
+ );
942
+ if (o.value === void 0 && o.options.length > 0)
943
+ if (n.value)
944
+ a.value = o.options[0], i("input", a.value);
945
+ else {
946
+ const c = o.options[0];
947
+ a.value = (l = o.config) != null && l.primitive ? c[o.valueField] : c, i("input", a.value);
939
948
  }
940
- const t = u.split(".");
941
- let d = r;
942
- for (const p of t)
943
- d = d == null ? void 0 : d[p];
944
- return d;
949
+ }), U(
950
+ () => a.value,
951
+ (l) => {
952
+ i("input", l);
945
953
  }
946
- return r;
947
- }, o = y(() => n.options.length > 0 ? a(n.options[0], n.valueKey) : ""), c = y({
948
- // Getter: Called when the template reads selectedValue
949
- // Returns the current modelValue from parent (or empty string if undefined)
950
- get: () => n.modelValue ?? o.value,
951
- // Setter: Called when the select's v-model updates selectedValue
952
- // Emits the new value to the parent component
953
- set: (r) => l("update:modelValue", r)
954
- });
955
- return (r, u) => {
956
- var t;
957
- return (t = r.options) != null && t.length ? D((s(), i("select", {
958
- key: 0,
959
- "onUpdate:modelValue": u[0] || (u[0] = (d) => c.value = d),
960
- class: "dropdown"
961
- }, [
962
- (s(!0), i(T, null, z(r.options, (d, p) => (s(), i("option", {
963
- key: `${a(d, r.valueKey)}-${p}`,
964
- value: a(d, r.valueKey)
965
- }, L(a(d, r.labelKey)), 9, bt))), 128))
966
- ], 512)), [
967
- [re, c.value]
968
- ]) : (s(), i("div", yt, u[1] || (u[1] = [
969
- h("p", null, "No options available", -1)
970
- ])));
954
+ ), U(
955
+ () => o.value,
956
+ (l) => {
957
+ a.value = l;
958
+ }
959
+ );
960
+ const d = (l) => {
961
+ const c = l.target;
962
+ i(o.name, c.value);
971
963
  };
964
+ return (l, c) => (s(), r("div", _t, [
965
+ F(v("select", {
966
+ "aria-label": l.dropdownLabel || `${l.name} dropdown`,
967
+ class: "dropdown__select",
968
+ name: l.name,
969
+ onChange: d,
970
+ "onUpdate:modelValue": c[0] || (c[0] = (t) => a.value = t)
971
+ }, [
972
+ n.value ? (s(!0), r(T, { key: 0 }, z(l.options, (t) => (s(), r("option", {
973
+ key: t,
974
+ value: t,
975
+ name: t
976
+ }, w(t), 9, yt))), 128)) : (s(!0), r(T, { key: 1 }, z(l.options, (t) => {
977
+ var f;
978
+ return s(), r("option", {
979
+ key: t[l.valueField],
980
+ value: (f = l.config) != null && f.primitive ? t[l.valueField] : t,
981
+ name: t[l.textField]
982
+ }, w(t[l.textField]), 9, $t);
983
+ }), 128))
984
+ ], 40, bt), [
985
+ [ie, a.value]
986
+ ])
987
+ ]));
972
988
  }
973
- }), Mt = /* @__PURE__ */ w($t, [["__scopeId", "data-v-4a5d0657"]]), kt = ["id"], wt = /* @__PURE__ */ C({
989
+ }), Bt = /* @__PURE__ */ S(kt, [["__scopeId", "data-v-9c71f7b0"]]), wt = ["id"], St = /* @__PURE__ */ L({
974
990
  __name: "SlpSection",
975
991
  props: {
976
992
  backgroundColor: {
977
993
  type: String,
978
994
  required: !1,
979
- validator(v) {
980
- const e = /^#([A-Fa-f0-9]{3}){1,2}$/.test(v), n = /^\$color-[a-zA-Z0-9-]+$/.test(v);
981
- return v ? e || n : !0;
995
+ validator(p) {
996
+ const e = /^#([A-Fa-f0-9]{3}){1,2}$/.test(p), o = /^\$color-[a-zA-Z0-9-]+$/.test(p);
997
+ return p ? e || o : !0;
982
998
  }
983
999
  },
984
1000
  id: {
@@ -986,42 +1002,43 @@ const It = /* @__PURE__ */ w(Se, [["render", Ce], ["__scopeId", "data-v-adc8d02f
986
1002
  required: !1
987
1003
  }
988
1004
  },
989
- setup(v) {
990
- const e = v, n = y(() => {
1005
+ setup(p) {
1006
+ const e = p, o = $(() => {
991
1007
  var a;
992
1008
  return !e.backgroundColor || (a = e.backgroundColor) != null && a.startsWith("$") ? {} : { backgroundColor: e.backgroundColor };
993
- }), l = y(() => {
994
- var a, o;
995
- return (a = e.backgroundColor) != null && a.startsWith("$") ? `slp-background-${(o = e.backgroundColor) == null ? void 0 : o.slice(1)}` : null;
1009
+ }), i = $(() => {
1010
+ var a, n;
1011
+ return (a = e.backgroundColor) != null && a.startsWith("$") ? `slp-background-${(n = e.backgroundColor) == null ? void 0 : n.slice(1)}` : null;
996
1012
  });
997
- return (a, o) => (s(), i("section", {
998
- style: J(n.value),
999
- class: m(l.value),
1000
- id: v.id || void 0
1013
+ return (a, n) => (s(), r("section", {
1014
+ style: Z(o.value),
1015
+ class: _(i.value),
1016
+ id: p.id || void 0
1001
1017
  }, [
1002
- k(te, null, {
1018
+ y(ee, null, {
1003
1019
  default: N(() => [
1004
1020
  b(a.$slots, "default", {}, void 0, !0)
1005
1021
  ]),
1006
1022
  _: 3
1007
1023
  })
1008
- ], 14, kt));
1024
+ ], 14, wt));
1009
1025
  }
1010
- }), Gt = /* @__PURE__ */ w(wt, [["__scopeId", "data-v-2b3ad016"]]);
1026
+ }), Vt = /* @__PURE__ */ S(St, [["__scopeId", "data-v-2b3ad016"]]);
1011
1027
  export {
1012
- Vt as SlpBreadcrumb,
1013
- K as SlpButton,
1014
- Ct as SlpColumn,
1015
- te as SlpContainer,
1016
- Mt as SlpDropdown,
1017
- P as SlpIcon,
1018
- zt as SlpLoader,
1019
- Re as SlpRadioButton,
1020
- Tt as SlpRadioButtonGroup,
1021
- It as SlpRow,
1022
- Gt as SlpSection,
1023
- Nt as SlpSideNavigation,
1028
+ Gt as SlpBreadcrumb,
1029
+ W as SlpButton,
1030
+ It as SlpColumn,
1031
+ ee as SlpContainer,
1032
+ Bt as SlpCustomDropdown,
1033
+ Bt as SlpDropdown,
1034
+ R as SlpIcon,
1035
+ Mt as SlpLoader,
1036
+ Oe as SlpRadioButton,
1037
+ zt as SlpRadioButtonGroup,
1038
+ Nt as SlpRow,
1039
+ Vt as SlpSection,
1040
+ Tt as SlpSideNavigation,
1024
1041
  Et as SlpSideNavigationWithTree,
1025
- dt as SlpTooltip,
1042
+ rt as SlpTooltip,
1026
1043
  A as SlpTypography
1027
1044
  };