@ownclouders/design-system
Version:
ownCloud Design System is based on VueDesign Systems and is used to design ownCloud UI components
4,333 lines • 142 kB
JavaScript
import { defineComponent as x, computed as u, createBlock as b, openBlock as n, resolveDynamicComponent as le, normalizeClass as M, withCtx as k, createVNode as L, unref as r, normalizeStyle as ue, createElementBlock as c, ref as W, toDisplayString as S, createElementVNode as p, createCommentVNode as y, resolveDirective as ce, withDirectives as Y, Fragment as G, renderList as Z, resolveComponent as J, mergeProps as X, toHandlers as we, renderSlot as P, useTemplateRef as Te, watch as se, onMounted as De, onBeforeUnmount as wt, useAttrs as me, withModifiers as re, nextTick as he, withKeys as xe, vModelCheckbox as Nt, createTextVNode as ae, normalizeProps as ee, guardReactiveProps as ne, vShow as ye, Transition as jt, createSlots as Kt, vModelRadio as Wt, useCssVars as Gt, useSlots as Ut, customRef as qt } from "vue";
import { u as _, g as te, a as Ne, b as Xt, r as Jt, s as Qt, h as be, c as ke, E as Yt, d as Zt, e as _t, f as ea, i as ta, j as aa } from "./uniqueId-BYayVry_.js";
import na from "vue-inline-svg";
import { useGettext as ie } from "vue3-gettext";
import xt, { hideAll as la } from "tippy.js";
import { detectOverflow as oa } from "@popperjs/core";
import sa from "deepmerge";
import { isEqual as ia } from "lodash-es";
import { FocusTrap as $t } from "focus-trap-vue";
import { DateTime as je } from "luxon";
import ra from "fuse.js";
import { u as ca } from "./index-B-hUyoop.js";
const j = /* @__PURE__ */ x({
name: "OcIcon",
status: "ready",
release: "1.0.0",
__name: "OcIcon",
props: {
name: { default: "info" },
fillType: { default: "fill" },
accessibleLabel: { default: "" },
type: { default: "span" },
size: { default: "medium" },
variation: { default: "passive" },
color: { default: "" }
},
emits: ["loaded"],
setup(e) {
function t(o) {
return i(te(o));
}
function a(o) {
return i(o);
}
function i(o) {
if (o !== null)
return `oc-icon-${o}`;
}
function l(o) {
if (e.accessibleLabel !== "") {
const m = document.createElement("title");
m.setAttribute("id", r(s)), m.appendChild(document.createTextNode(e.accessibleLabel)), o.insertBefore(m, o.firstChild);
}
return o;
}
const s = u(() => _("oc-icon-title-")), d = u(() => {
const o = "icons/";
return e.fillType.toLowerCase() === "none" ? `${o}${e.name}.svg` : `${o}${e.name}-${e.fillType.toLowerCase()}.svg`;
});
return (o, m) => (n(), b(le(e.type), {
class: M([
{ "oc-button-reset": e.type === "button" },
"oc-icon",
t(e.size),
a(e.variation)
])
}, {
default: k(() => [
L(r(na), {
src: d.value,
"transform-source": l,
"aria-hidden": e.accessibleLabel === "" ? "true" : null,
"aria-labelledby": e.accessibleLabel === "" ? null : s.value,
focusable: e.accessibleLabel === "" ? "false" : null,
style: ue(e.color !== "" ? { fill: e.color } : {}),
onLoaded: m[0] || (m[0] = (f) => o.$emit("loaded"))
}, null, 8, ["src", "aria-hidden", "aria-labelledby", "focusable", "style"])
]),
_: 1
}, 8, ["class"]));
}
}), Ot = /* @__PURE__ */ x({
name: "OcApplicationIcon",
components: { OcIcon: j },
status: "ready",
release: "15.0.0",
__name: "OcApplicationIcon",
props: {
icon: {},
colorPrimary: { default: "" },
colorSecondary: { default: "" }
},
setup(e) {
const t = u(() => "rgba(255,255,255,0.7)"), a = (f, C) => `linear-gradient(90deg, ${f} 0%, ${C} 100%)`, i = u(() => Ne(e.colorPrimary)), l = u(() => Ne(e.colorSecondary)), s = u(() => !!e.colorPrimary), d = u(() => !!e.colorSecondary), o = u(() => {
const f = Xt(e.icon);
return Jt(Qt(be(f), be("#ffffff"), 4));
}), m = u(() => {
const f = r(s) ? r(i) : r(o), C = r(d) ? r(l) : ke(be(f), 40), F = ke(be(f), -25), H = ke(be(f), 45);
return {
background: a(f, C),
boxShadow: `inset ${H} 0px 0px 1px 0px,${F} 0px 0px 1px 0px`
};
});
return (f, C) => (n(), c("div", {
class: "oc-application-icon oc-flex-inline oc-flex-middle oc-flex-center",
style: ue(m.value)
}, [
L(j, {
name: e.icon,
color: t.value,
size: "medium"
}, null, 8, ["name", "color"])
], 4));
}
}), Ke = {};
typeof Ke == "function" && Ke(Ot);
const ua = ["src", "alt", "aria-hidden", "title", "loading"], Le = /* @__PURE__ */ x({
name: "OcImg",
status: "ready",
release: "1.0.0",
__name: "OcImage",
props: {
src: { default: null },
alt: { default: "" },
title: { default: null },
loadingType: { default: "eager" }
},
setup(e) {
const t = u(() => e.alt.length === 0);
return (a, i) => (n(), c("img", {
src: e.src,
alt: e.alt,
"aria-hidden": `${t.value}`,
title: e.title,
loading: e.loadingType
}, null, 8, ua));
}
}), da = (e) => e.split(/[ -]/).map((t) => t.replace(/[^\p{L}\p{Nd}]/giu, "")).filter(Boolean).map((t) => t.charAt(0)).slice(0, 3).join("").toUpperCase(), fa = ["width", "aria-label", "aria-hidden", "focusable", "role", "data-test-user-name"], ma = {
key: 1,
class: "avatarInitials"
}, $e = /* @__PURE__ */ x({
name: "OcAvatar",
status: "ready",
release: "1.0.0",
__name: "OcAvatar",
props: {
src: { default: "" },
userName: { default: "" },
accessibleLabel: { default: "" },
width: { default: 50 }
},
setup(e) {
const t = [
"#b82015",
"#c21c53",
"#9C27B0",
"#673AB7",
"#3F51B5",
"#106892",
"#055c68",
"#208377",
"#1a761d",
"#476e1a",
"#636d0b",
"#8e5c11",
"#795548",
"#465a64"
], a = W(!1);
function i() {
a.value = !0;
}
function l(f, C) {
return C[f % C.length];
}
const s = u(() => r(d) ? "" : r(l(r(e.userName).length, r(t)))), d = u(() => !r(a) && !!r(e.src)), o = u(() => {
const f = {
width: `${r(e.width)}px`,
height: `${r(e.width)}px`,
lineHeight: `${r(e.width)}px`
}, C = {
backgroundColor: r(s),
fontSize: `${Math.floor(r(e.width) / 2.5)}px`,
fontFamily: "Helvetica, Arial, sans-serif",
color: "white"
};
return Object.assign(f, C), f;
}), m = u(() => r(d) ? "" : da(r(e.userName)));
return (f, C) => (n(), c("span", {
class: "vue-avatar--wrapper oc-avatar",
style: ue(o.value),
width: e.width,
"aria-label": e.accessibleLabel === "" ? null : e.accessibleLabel,
"aria-hidden": e.accessibleLabel === "" ? "true" : null,
focusable: e.accessibleLabel === "" ? "false" : null,
role: e.accessibleLabel === "" ? null : "img",
"data-test-user-name": e.userName
}, [
d.value ? (n(), b(Le, {
key: 0,
"loading-type": "lazy",
class: "avatarImg",
src: e.src,
onError: i
}, null, 8, ["src"])) : (n(), c("span", ma, S(m.value), 1))
], 12, fa));
}
}), We = {};
typeof We == "function" && We($e);
const ha = ["textContent"], Me = /* @__PURE__ */ x({
name: "OcAvatarCount",
status: "ready",
release: "2.1.0",
__name: "OcAvatarCount",
props: {
count: {},
size: { default: 30 }
},
setup(e) {
const t = u(() => Math.floor(r(e.size) / 2.5) + "px");
return (a, i) => (n(), c("span", {
class: "oc-avatar-count",
style: ue({ width: e.size + "px", height: e.size + "px", fontSize: t.value }),
textContent: S(`+${e.count}`)
}, null, 12, ha));
}
}), Ge = {};
typeof Ge == "function" && Ge(Me);
const ga = ["data-test-item-name", "aria-label", "aria-hidden", "focusable", "role"], ge = /* @__PURE__ */ x({
name: "OcAvatarItem",
status: "ready",
release: "10.0.0",
__name: "OcAvatarItem",
props: {
name: {},
icon: { default: null },
iconColor: { default: "var(--oc-color-text-inverse)" },
iconFillType: { default: "fill" },
iconSize: { default: "small" },
background: { default: "var(--oc-color-swatch-passive-default)" },
accessibleLabel: { default: "" },
width: { default: 30 }
},
setup(e) {
const t = u(() => `${r(e.width)}px`), a = u(() => r(e.icon) !== null), i = u(() => r(e.background) || r(l)), l = u(() => {
const s = [
"#b82015",
"#c21c53",
"#9C27B0",
"#673AB7",
"#3F51B5",
"#106892",
"#055c68",
"#208377",
"#1a761d",
"#476e1a",
"#636d0b",
"#8e5c11",
"#795548",
"#465a64"
];
return s[Math.floor(Math.random() * s.length)];
});
return (s, d) => (n(), c("div", {
"data-test-item-name": e.name,
"aria-label": e.accessibleLabel === "" ? null : e.accessibleLabel,
"aria-hidden": e.accessibleLabel === "" ? "true" : null,
focusable: e.accessibleLabel === "" ? "false" : null,
role: e.accessibleLabel === "" ? null : "img"
}, [
p("span", {
class: "oc-avatar-item",
style: ue({
backgroundColor: i.value,
"--icon-color": e.iconColor,
"--width": t.value
})
}, [
a.value ? (n(), b(j, {
key: 0,
name: e.icon,
size: e.iconSize,
"fill-type": e.iconFillType
}, null, 8, ["name", "size", "fill-type"])) : y("", !0)
], 4)
], 8, ga));
}
}), Ue = {};
typeof Ue == "function" && Ue(ge);
const Be = /* @__PURE__ */ x({
name: "OcAvatarFederated",
status: "ready",
release: "10.0.0",
__name: "OcAvatarFederated",
props: {
name: {},
accessibleLabel: { default: "" },
width: { default: 30 },
iconSize: { default: "small" }
},
setup(e) {
return (t, a) => (n(), b(ge, {
width: e.width,
"icon-size": e.iconSize,
icon: "earth",
"icon-fill-type": "line",
"icon-color": "#85C1BA",
name: e.name,
"accessible-label": e.accessibleLabel
}, null, 8, ["width", "icon-size", "name", "accessible-label"]));
}
}), qe = {};
typeof qe == "function" && qe(Be);
const Pe = /* @__PURE__ */ x({
name: "OcAvatarGroup",
status: "ready",
release: "10.0.0",
__name: "OcAvatarGroup",
props: {
name: {},
accessibleLabel: { default: "" },
width: { default: 30 },
iconSize: { default: "small" }
},
setup(e) {
return (t, a) => (n(), b(ge, {
width: e.width,
"icon-size": e.iconSize,
icon: "group",
name: e.name,
"accessible-label": e.accessibleLabel
}, null, 8, ["width", "icon-size", "name", "accessible-label"]));
}
}), Xe = {};
typeof Xe == "function" && Xe(Pe);
const Ie = /* @__PURE__ */ x({
name: "OcAvatarGuest",
status: "ready",
release: "10.0.0",
__name: "OcAvatarGuest",
props: {
name: {},
accessibleLabel: { default: "" },
width: { default: 30 },
iconSize: { default: "small" }
},
setup(e) {
return (t, a) => (n(), b(ge, {
width: e.width,
"icon-size": e.iconSize,
icon: "global",
"icon-fill-type": "line",
"icon-color": "#D78841",
name: e.name,
"accessible-label": e.accessibleLabel
}, null, 8, ["width", "icon-size", "name", "accessible-label"]));
}
}), Je = {};
typeof Je == "function" && Je(Ie);
const Ae = /* @__PURE__ */ x({
name: "OcAvatarLink",
status: "ready",
release: "2.1.0",
__name: "OcAvatarLink",
props: {
name: {},
accessibleLabel: { default: "" },
width: { default: 30 },
iconSize: { default: "small" }
},
setup(e) {
return (t, a) => (n(), b(ge, {
width: e.width,
"icon-size": e.iconSize,
icon: "link",
name: e.name,
"accessible-label": e.accessibleLabel
}, null, 8, ["width", "icon-size", "name", "accessible-label"]));
}
}), Qe = {};
typeof Qe == "function" && Qe(Ae);
const de = {
user: 0,
group: 1,
link: 3,
guest: 4,
remote: 6
}, ba = ["textContent"], kt = /* @__PURE__ */ x({
name: "OcAvatars",
status: "ready",
release: "2.1.0",
__name: "OcAvatars",
props: {
items: {},
stacked: { type: Boolean, default: !1 },
isTooltipDisplayed: { type: Boolean, default: !1 },
maxDisplayed: { default: null },
accessibleDescription: { default: null }
},
setup(e) {
function t(d) {
switch (d.shareType) {
case de.link:
return Ae;
case de.remote:
return Be;
case de.group:
return Pe;
case de.guest:
return Ie;
}
}
const a = u(() => e.maxDisplayed && e.maxDisplayed < e.items.length), i = u(() => {
if (e.isTooltipDisplayed) {
const d = r(l).map((m) => m.displayName);
r(s).length > 0 && d.push(...r(s).map((m) => m.name));
let o = d.join(", ");
return r(a) && (o += ` +${e.items.length - e.maxDisplayed}`), o;
}
return null;
}), l = u(() => {
const d = e.items.filter((o) => o.shareType === de.user);
return r(a) ? d.slice(0, e.maxDisplayed) : d;
}), s = u(() => {
const d = e.items.filter((o) => o.shareType !== de.user);
return r(a) ? e.maxDisplayed <= r(l).length ? [] : d.slice(0, e.maxDisplayed - r(l).length) : d;
});
return (d, o) => {
const m = ce("oc-tooltip");
return n(), c("span", null, [
Y((n(), c("span", {
class: M(["oc-avatars", { "oc-avatars-stacked": e.stacked }]),
"aria-hidden": "true"
}, [
l.value.length > 0 ? (n(!0), c(G, { key: 0 }, Z(l.value, (f) => (n(), b($e, {
key: f.username,
src: f.avatar,
"user-name": f.displayName,
width: 30
}, null, 8, ["src", "user-name"]))), 128)) : y("", !0),
s.value.length > 0 ? (n(!0), c(G, { key: 1 }, Z(s.value, (f, C) => (n(), b(le(t(f)), {
key: f.name + C,
name: f.name
}, null, 8, ["name"]))), 128)) : y("", !0),
a.value ? (n(), b(Me, {
key: 2,
count: e.items.length - e.maxDisplayed
}, null, 8, ["count"])) : y("", !0)
], 2)), [
[m, i.value]
]),
e.accessibleDescription ? (n(), c("span", {
key: 0,
class: "oc-invisible-sr",
textContent: S(e.accessibleDescription)
}, null, 8, ba)) : y("", !0)
]);
};
}
}), Ye = {};
typeof Ye == "function" && Ye(kt);
const U = /* @__PURE__ */ x({
name: "OcButton",
status: "ready",
release: "1.0.0",
__name: "OcButton",
props: {
type: { default: "button" },
disabled: { type: Boolean, default: !1 },
size: { default: "medium" },
href: { default: null },
target: { default: null },
to: { default: null },
ariaLabel: { default: null },
submit: { default: "button" },
variation: { default: "passive" },
appearance: { default: "outline" },
justifyContent: { default: "center" },
gapSize: { default: "medium" },
showSpinner: { type: Boolean, default: !1 }
},
emits: ["click"],
setup(e, { emit: t }) {
const a = t;
function i(o) {
a("click", o);
}
const l = u(() => [
"oc-button",
"oc-rounded",
`oc-button-${te(e.size)}`,
`oc-button-justify-content-${e.justifyContent}`,
`oc-button-gap-${te(e.gapSize)}`,
`oc-button-${e.variation}`,
`oc-button-${e.variation}-${e.appearance}`
]), s = u(() => ({
...e.href && { href: e.href },
...e.target && { target: e.target },
...e.to && { to: e.to },
...e.type === "button" && { type: e.submit },
...e.type === "button" && { disabled: e.disabled }
})), d = u(() => ({
...e.type === "button" && { click: i }
}));
return (o, m) => {
const f = J("oc-spinner");
return n(), b(le(e.type), X(s.value, {
"aria-label": e.ariaLabel,
class: l.value
}, we(d.value)), {
default: k(() => [
e.showSpinner ? (n(), b(f, {
key: 0,
size: "small",
class: "spinner"
})) : y("", !0),
P(o.$slots, "default")
]),
_: 3
}, 16, ["aria-label", "class"]);
};
}
}), Ze = {};
typeof Ze == "function" && Ze(U);
const Ct = {
name: "hideOnEsc",
defaultValue: !0,
fn({ hide: e }) {
const t = (a) => {
a.code === "Escape" && e();
};
return {
onShow: () => {
document.addEventListener("keydown", t);
},
onHide: () => {
document.removeEventListener("keydown", t);
}
};
}
}, pa = {
name: "ariaHidden",
defaultValue: !0,
fn(e) {
return {
onCreate() {
e.popper.setAttribute("aria-hidden", "true");
}
};
}
}, ve = (e) => {
if (e)
try {
e.destroy();
} catch {
}
}, _e = (e, { value: t = {} }) => {
if (Object.prototype.toString.call(t) !== "[object Object]" && (t = { content: t }), t.content !== 0 && !t.content || t.content === "") {
ve(e.tooltip), e.tooltip = null;
return;
}
const a = sa.all([
{
ignoreAttributes: !0,
interactive: !0,
aria: {
content: null,
expanded: !1
}
},
t
]);
if (!e.tooltip) {
e.tooltip = xt(e, {
...a,
plugins: [Ct, pa]
});
return;
}
e.tooltip.setProps(a);
}, Mo = {
name: "OcTooltip",
beforeMount: _e,
updated: _e,
unmounted: (e) => ve(e.tooltip)
}, ya = ["id"], pe = /* @__PURE__ */ x({
name: "OcDrop",
status: "ready",
release: "1.0.0",
__name: "OcDrop",
props: {
dropId: { default: () => _("oc-drop-") },
popperOptions: { default: () => ({}) },
toggle: { default: "" },
position: { default: "bottom-start" },
mode: { default: "click" },
closeOnClick: { type: Boolean, default: !1 },
isNested: { type: Boolean, default: !1 },
target: { default: null },
paddingSize: { default: "medium" },
offset: {},
sameWidthAsTarget: { type: Boolean, default: !1 }
},
emits: ["hideDrop", "showDrop"],
setup(e, { expose: t, emit: a }) {
const i = a, l = Te("drop"), s = W(null), d = (T) => {
r(s)?.show(T);
}, o = (T) => {
r(s)?.hide(T);
}, m = () => {
e.closeOnClick && o();
}, f = (T) => {
const g = r(l).closest(".tippy-box");
T.relatedTarget && !g.contains(T.relatedTarget) && o();
}, C = u(() => ({
hover: "mouseenter focus"
})[e.mode] || e.mode), F = u(() => `oc-p-${te(e.paddingSize)}`);
se(
() => [e.position, e.mode],
() => {
s.value && s.value.setProps({ placement: e.position, trigger: C.value });
},
{ immediate: !0 }
);
function H() {
ve(r(s));
const T = r(e.target) ? document.querySelector(r(e.target)) : r(e.toggle) ? document.querySelector(r(e.toggle)) : l.value.previousElementSibling, g = l.value;
if (!T || !g)
return;
const O = {
name: "sameWidth",
enabled: !0,
phase: "beforeWrite",
requires: ["computeStyles"],
fn: ({ state: w }) => {
w.styles.popper.width = `${w.rects.reference.width}px`;
},
effect: ({ state: w }) => {
w.elements.popper.style.width = `${w.elements.reference.offsetWidth}px`;
}
}, V = {
trigger: r(C),
placement: r(e.position),
arrow: !1,
hideOnClick: !0,
interactive: !0,
plugins: [Ct],
theme: "none",
maxWidth: 416,
offset: r(e.offset) ?? 0,
...!r(e.isNested) && {
onShow: (w) => {
i("showDrop"), la({ exclude: w });
},
onHide: () => {
i("hideDrop");
}
},
popperOptions: {
...r(e.popperOptions),
modifiers: [
...r(e.popperOptions)?.modifiers ? r(e.popperOptions).modifiers : [],
...r(e.sameWidthAsTarget) ? [O] : [],
{
name: "fixVerticalPosition",
enabled: !0,
phase: "beforeWrite",
requiresIfExists: ["offset", "preventOverflow", "flip"],
fn({ state: w }) {
const z = oa(w), q = w.modifiersData.fullHeight || w.elements.popper.offsetHeight, I = z.top * -1 - 10, K = I + q + z.bottom * -1, A = K - I, v = K - A;
q > A && q > v && (I <= v && ["right-start", "left-start"].includes(w.placement) ? (w.styles.popper.top = `${v - I}px`, w.modifiersData.fullHeight = q) : (w.styles.popper.top = `-${I}px`, w.modifiersData.fullHeight = q)), q > K && (w.styles.popper.maxHeight = `${K - 10}px`, w.styles.popper.overflowY = "auto", w.styles.popper.overflowX = "hidden");
}
}
]
},
content: g
};
r(e.target) && (V.triggerTarget = r(e.toggle) ? document.querySelector(r(e.toggle)) : l.value.previousElementSibling), s.value = xt(T, V);
}
return De(() => {
r(l).addEventListener("focusout", f), H();
}), wt(() => {
r(l).removeEventListener("focusout", f), ve(r(s));
}), t({ show: d, hide: o, tippy: s }), (T, g) => (n(), c("div", {
id: e.dropId,
ref_key: "drop",
ref: l,
class: "oc-drop oc-box-shadow-medium oc-rounded",
onClick: m
}, [
T.$slots.default ? (n(), c("div", {
key: 0,
class: M(["oc-card oc-card-body oc-background-secondary", F.value])
}, [
P(T.$slots, "default")
], 2)) : P(T.$slots, "special", { key: 1 })
], 8, ya));
}
}), et = {};
typeof et == "function" && et(pe);
const va = ["id", "aria-label"], wa = { class: "oc-breadcrumb-list oc-flex oc-m-rm oc-p-rm" }, xa = ["data-key", "data-item-id", "aria-hidden", "onDragenter", "onDragleave", "onMouseleave", "onDrop"], $a = { class: "oc-breadcrumb-item-text oc-breadcrumb-item-navigable" }, Oa = ["textContent"], ka = ["aria-current", "textContent"], Ca = ["textContent"], St = /* @__PURE__ */ x({
name: "OcBreadcrumb",
status: "ready",
release: "1.0.0",
__name: "OcBreadcrumb",
props: {
id: { default: () => _("oc-breadcrumbs-") },
items: {},
variation: { default: "default" },
contextMenuPadding: { default: "medium" },
maxWidth: { default: () => -1 },
truncationOffset: { default: 2 },
showContextActions: { type: Boolean, default: !1 }
},
setup(e, { emit: t }) {
const a = me(), i = t, { $gettext: l } = ie(), s = W([]), d = W([]), o = W(e.items.slice()), m = (I) => document.querySelector(`.oc-breadcrumb-list [data-item-id="${I}"]`), f = (I, K) => !(!I.id || K === r(o).length - 1 || I.isTruncationPlaceholder || I.isStaticNav), C = (I, K) => {
if (f(I, K) && typeof I.to == "object") {
const A = I.to;
A.path = A.path || "/", i(Yt, A);
}
}, F = () => {
let I = 100;
return s.value.forEach((K) => {
const v = m(K.id)?.getBoundingClientRect()?.width || 0;
I += v;
}), I;
}, H = (I) => {
const K = e.maxWidth;
if (!K)
return;
const A = F();
if (!(K < A) || s.value.length <= e.truncationOffset + 1)
return;
const $ = s.value.splice(I, 1);
d.value.push($[0]), H(I);
}, T = u(
() => d.value.length >= 1 ? r(d)[r(d).length - 1] : { to: {} }
);
se([() => e.maxWidth, () => e.items], () => {
o.value = [...e.items], o.value.length > e.truncationOffset - 1 && o.value.splice(e.truncationOffset - 1, 0, {
text: "...",
allowContextActions: !1,
to: {},
isTruncationPlaceholder: !0
}), s.value = [...o.value], d.value = [], he(() => {
H(e.truncationOffset);
});
}, { immediate: !0 });
const O = u(() => {
if (!(e.items.length === 0 || !e.items))
return [...e.items].reverse()[0];
}), V = u(() => [...e.items].reverse()[1]?.to), w = u(() => l("Show actions for current folder")), z = (I) => e.items.length - 1 === I ? "page" : null, q = (I, K, A, v) => {
if (!f(I, K) || (v.dataTransfer?.types || []).some((h) => h === "Files") || v.currentTarget?.contains(v.relatedTarget))
return;
const E = m(I.id).children[0].classList, Q = "oc-breadcrumb-item-dragover";
A ? E.remove(Q) : E.add(Q);
};
return (I, K) => {
const A = J("router-link"), v = ce("oc-tooltip");
return n(), c(G, null, [
p("nav", X({
id: e.id,
class: `oc-breadcrumb oc-breadcrumb-${e.variation}`,
"aria-label": r(l)("Breadcrumbs")
}, r(a)), [
p("ol", wa, [
(n(!0), c(G, null, Z(o.value, ($, E) => (n(), c("li", {
key: E,
"data-key": E,
"data-item-id": $.id,
"aria-hidden": $.isTruncationPlaceholder,
class: M([
"oc-breadcrumb-list-item",
"oc-flex",
"oc-flex-middle",
{
"oc-invisible-sr": d.value.indexOf($) !== -1 || $.isTruncationPlaceholder && d.value.length === 0
}
]),
onDragover: K[0] || (K[0] = re(() => {
}, ["prevent"])),
onDragenter: re((Q) => q($, E, !1, Q), ["prevent"]),
onDragleave: re((Q) => q($, E, !0, Q), ["prevent"]),
onMouseleave: (Q) => q($, E, !0, Q),
onDrop: (Q) => C($, E)
}, [
$.to ? (n(), b(A, {
key: 0,
"aria-current": z(E),
to: $.isTruncationPlaceholder ? T.value.to : $.to
}, {
default: k(() => [
p("span", $a, S($.text), 1)
]),
_: 2
}, 1032, ["aria-current", "to"])) : $.onClick ? (n(), b(U, {
key: 1,
"aria-current": z(E),
appearance: "raw",
class: "oc-flex",
onClick: $.onClick
}, {
default: k(() => [
p("span", {
class: M([
"oc-breadcrumb-item-text",
"oc-breadcrumb-item-navigable",
{
"oc-breadcrumb-item-text-last": E === o.value.length - 1
}
]),
textContent: S($.text)
}, null, 10, Oa)
]),
_: 2
}, 1032, ["aria-current", "onClick"])) : (n(), c("span", {
key: 2,
class: "oc-breadcrumb-item-text",
"aria-current": z(E),
tabindex: "-1",
textContent: S($.text)
}, null, 8, ka)),
E !== o.value.length - 1 ? (n(), b(j, {
key: 3,
color: "var(--oc-color-text-default)",
name: "arrow-right-s",
class: "oc-mx-xs",
"fill-type": "line"
})) : y("", !0),
e.showContextActions && E === o.value.length - 1 ? (n(), c(G, { key: 4 }, [
Y((n(), b(U, {
id: "oc-breadcrumb-contextmenu-trigger",
"aria-label": w.value,
appearance: "raw"
}, {
default: k(() => [
L(j, {
name: "more-2",
color: "var(--oc-color-text-default)"
})
]),
_: 1
}, 8, ["aria-label"])), [
[v, w.value]
]),
L(pe, {
"drop-id": "oc-breadcrumb-contextmenu",
toggle: "#oc-breadcrumb-contextmenu-trigger",
mode: "click",
"close-on-click": "",
"padding-size": e.contextMenuPadding
}, {
default: k(() => [
P(I.$slots, "contextMenu")
]),
_: 3
}, 8, ["padding-size"])
], 64)) : y("", !0)
], 42, xa))), 128))
]),
V.value && o.value.length > 1 ? (n(), b(U, {
key: 0,
appearance: "raw",
type: "router-link",
"aria-label": r(l)("Navigate one level up"),
to: V.value,
class: "oc-breadcrumb-mobile-navigation"
}, {
default: k(() => [
L(j, {
name: "arrow-left-s",
"fill-type": "line",
size: "large",
class: "oc-mr-m"
})
]),
_: 1
}, 8, ["aria-label", "to"])) : y("", !0)
], 16, va),
o.value.length > 1 ? (n(), c("div", X({
key: 0,
class: "oc-breadcrumb-mobile-current"
}, r(a)), [
p("span", {
class: "oc-text-truncate",
"aria-current": "page",
textContent: S(O.value.text)
}, null, 8, Ca)
], 16)) : y("", !0)
], 64);
};
}
}), tt = {};
typeof tt == "function" && tt(St);
const Sa = ["id", "value", "disabled", "aria-label"], Ta = ["for", "textContent"], Tt = /* @__PURE__ */ x({
name: "OcCheckbox",
status: "ready",
release: "1.0.0",
__name: "OcCheckbox",
props: {
id: { default: () => _("oc-checkbox-") },
modelValue: { type: [Boolean, Array], default: !1 },
disabled: { type: Boolean, default: !1 },
option: { default: null },
label: { default: null },
labelHidden: { type: Boolean, default: !1 },
size: { default: "medium" }
},
emits: ["click", "update:modelValue"],
setup(e, { emit: t }) {
const a = t, i = u({
get() {
return e.modelValue;
},
set(m) {
a("update:modelValue", m);
}
});
function l(m) {
i.value = !i.value, a("click", m);
}
const s = u(() => [
"oc-checkbox",
"oc-rounded",
`oc-checkbox-${te(e.size)}`,
{ "oc-checkbox-checked": o.value }
]), d = u(() => ({ "oc-cursor-pointer": !e.disabled })), o = u(() => Array.isArray(i.value) ? r(i.value).some((m) => ia(m, e.option)) : r(i));
return (m, f) => (n(), c("span", {
onClick: f[1] || (f[1] = (C) => m.$emit("click", C))
}, [
Y(p("input", {
id: e.id,
"onUpdate:modelValue": f[0] || (f[0] = (C) => i.value = C),
type: "checkbox",
name: "checkbox",
class: M(s.value),
value: e.option,
disabled: e.disabled,
"aria-label": e.labelHidden ? e.label : null,
onKeydown: xe(l, ["enter"])
}, null, 42, Sa), [
[Nt, i.value]
]),
e.labelHidden ? y("", !0) : (n(), c("label", {
key: 0,
for: e.id,
class: M(d.value),
textContent: S(e.label)
}, null, 10, Ta))
]));
}
}), at = {};
typeof at == "function" && at(Tt);
const Da = { class: "info-drop-content" }, La = { class: "oc-flex oc-flex-between info-header oc-border-b oc-pb-s" }, Ma = ["textContent"], Ba = ["textContent"], Pa = {
key: 1,
class: "info-list"
}, Ia = ["textContent"], Ve = /* @__PURE__ */ x({
name: "OcInfoDrop",
status: "unreleased",
__name: "OcInfoDrop",
props: {
dropId: { default: () => _("oc-info-drop-") },
toggle: { default: "" },
mode: { default: "click" },
title: {},
text: { default: "" },
list: { default: () => [] },
endText: { default: "" },
readMoreLink: { default: "" }
},
setup(e) {
const t = W(!1), a = u(() => (e.list || []).filter((i) => !!i.text));
return (i, l) => {
const s = ce("oc-tooltip");
return n(), b(pe, {
ref: "drop",
class: "oc-width-1-1 oc-info-drop",
"drop-id": e.dropId,
toggle: e.toggle,
mode: e.mode,
"close-on-click": "",
onHideDrop: l[0] || (l[0] = () => t.value = !1),
onShowDrop: l[1] || (l[1] = () => t.value = !0)
}, {
default: k(() => [
L(r($t), { active: t.value }, {
default: k(() => [
p("div", Da, [
p("div", La, [
p("h4", {
class: "oc-m-rm info-title",
textContent: S(i.$gettext(e.title))
}, null, 8, Ma),
Y((n(), b(U, {
appearance: "raw",
"aria-label": i.$gettext("Close")
}, {
default: k(() => [
L(j, {
name: "close",
"fill-type": "line",
size: "medium",
variation: "inherit",
"accessible-label": i.$gettext("Close")
}, null, 8, ["accessible-label"])
]),
_: 1
}, 8, ["aria-label"])), [
[s, i.$gettext("Close")]
])
]),
e.text ? (n(), c("p", {
key: 0,
class: "info-text",
textContent: S(i.$gettext(e.text))
}, null, 8, Ba)) : y("", !0),
a.value.length ? (n(), c("dl", Pa, [
(n(!0), c(G, null, Z(a.value, (d, o) => (n(), b(le(d.headline ? "dt" : "dd"), { key: o }, {
default: k(() => [
ae(S(i.$gettext(d.text)), 1)
]),
_: 2
}, 1024))), 128))
])) : y("", !0),
e.endText ? (n(), c("p", {
key: 2,
class: "info-text-end",
textContent: S(i.$gettext(e.endText))
}, null, 8, Ia)) : y("", !0),
e.readMoreLink ? (n(), b(U, {
key: 3,
type: "a",
appearance: "raw",
size: "small",
class: "info-more-link",
href: e.readMoreLink,
target: "_blank"
}, {
default: k(() => [
ae(S(i.$gettext("Read more")), 1)
]),
_: 1
}, 8, ["href"])) : y("", !0)
])
]),
_: 1
}, 8, ["active"])
]),
_: 1
}, 8, ["drop-id", "toggle", "mode"]);
};
}
}), nt = {};
typeof nt == "function" && nt(Ve);
const Aa = { class: "oc-contextual-helper" }, Va = /* @__PURE__ */ x({
name: "OcContextualHelper",
status: "unreleased",
__name: "OcContextualHelper",
props: {
title: {},
text: { default: "" },
list: { default: () => [] },
endText: { default: "" },
readMoreLink: { default: "" }
},
setup(e) {
const t = u(() => ({ title: e.title, text: e.text, list: e.list, endText: e.endText, readMoreLink: e.readMoreLink })), a = u(() => _("oc-contextual-helper-")), i = u(() => `${r(a)}-button`), l = u(() => `#${r(i)}`);
return (s, d) => (n(), c("div", Aa, [
L(U, {
id: i.value,
"aria-label": s.$gettext("Show more information"),
appearance: "raw"
}, {
default: k(() => [
L(j, {
name: "question",
"fill-type": "line",
size: "small",
"accessible-label": e.title
}, null, 8, ["accessible-label"])
]),
_: 1
}, 8, ["id", "aria-label"]),
L(Ve, X({
"drop-id": a.value,
toggle: l.value
}, t.value), null, 16, ["drop-id", "toggle"])
]));
}
}), Dt = /* @__PURE__ */ x({
name: "OcDatepicker",
status: "ready",
release: "1.0.0",
__name: "OcDatepicker",
props: {
label: {},
isClearable: { type: Boolean, default: !0 },
currentDate: { default: null },
minDate: { default: null }
},
emits: ["dateChanged"],
setup(e, { emit: t }) {
const a = t, { $gettext: i, current: l } = ie(), s = W(""), d = u(() => {
const f = je.fromISO(r(s)).endOf("day");
return f.isValid ? f : null;
}), o = u(() => !e.minDate || !r(d) ? !1 : r(d) < e.minDate), m = u(() => r(o) ? i("The date must be after %{date}", {
date: e.minDate.minus({ day: 1 }).setLocale(l).toLocaleString(je.DATE_SHORT)
}) : "");
return se(
() => e.currentDate,
() => {
if (e.currentDate) {
s.value = e.currentDate.toISODate();
return;
}
s.value = void 0;
},
{ immediate: !0 }
), se(
d,
() => {
a("dateChanged", { date: r(d), error: r(o) });
},
{
deep: !0
}
), (f, C) => {
const F = J("oc-text-input");
return n(), b(F, X({
modelValue: s.value,
"onUpdate:modelValue": C[0] || (C[0] = (H) => s.value = H)
}, f.$attrs, {
label: e.label,
type: "date",
min: e.minDate?.toISODate(),
"fix-message-line": !0,
"error-message": m.value,
"clear-button-enabled": e.isClearable,
"clear-button-accessible-label": r(i)("Clear date"),
class: "oc-date-picker"
}), null, 16, ["modelValue", "label", "min", "error-message", "clear-button-enabled", "clear-button-accessible-label"]);
};
}
}), lt = {};
typeof lt == "function" && lt(Dt);
const za = { class: "details-list" }, Ea = /* @__PURE__ */ x({
name: "OcDefinitionList",
status: "ready",
release: "16.0.0",
__name: "OcDefinitionList",
props: {
items: {}
},
setup(e) {
return (t, a) => (n(), c("dl", za, [
(n(!0), c(G, null, Z(e.items, (i) => (n(), c(G, {
key: i.term
}, [
p("dt", null, S(i.term), 1),
p("dd", null, S(i.definition), 1)
], 64))), 128))
]));
}
}), Fa = { class: "oc-dropzone" }, Lt = /* @__PURE__ */ x({
name: "OcDropzone",
status: "ready",
release: "0.0.1",
__name: "OcDropzone",
setup(e) {
return (t, a) => (n(), c("div", Fa, [
P(t.$slots, "default")
]));
}
}), ot = {};
typeof ot == "function" && ot(Lt);
const Ha = ["textContent"], Ra = ["textContent"], Na = /* @__PURE__ */ x({
name: "OcFilterChip",
status: "ready",
release: "15.0.0",
__name: "OcFilterChip",
props: {
id: { default: () => _("oc-filter-chip-") },
filterLabel: {},
selectedItemNames: { default: () => [] },
isToggle: { type: Boolean, default: !1 },
isToggleActive: { type: Boolean, default: !1 },
closeOnClick: { type: Boolean, default: !1 },
raw: { type: Boolean, default: !1 }
},
emits: ["clearFilter", "hideDrop", "showDrop", "toggleFilter"],
setup(e, { expose: t }) {
const a = W(), i = u(() => e.isToggle ? e.isToggleActive : !!e.selectedItemNames.length);
return t({ hideDrop: () => {
r(a)?.hide();
} }), (s, d) => {
const o = J("oc-icon"), m = J("oc-button"), f = ce("oc-tooltip");
return n(), c("div", {
class: M(["oc-filter-chip oc-flex", { "oc-filter-chip-toggle": e.isToggle, "oc-filter-chip-raw": e.raw }])
}, [
L(m, {
id: e.id,
class: M(["oc-filter-chip-button oc-pill", { "oc-filter-chip-button-selected": i.value }]),
appearance: "raw",
onClick: d[0] || (d[0] = (C) => e.isToggle ? s.$emit("toggleFilter") : !1)
}, {
default: k(() => [
L(o, {
class: M(i.value ? "oc-filter-check-icon-active" : "oc-filter-check-icon-inactive"),
name: "check",
size: "small",
color: "var(--oc-color-text-inverse)"
}, null, 8, ["class"]),
p("span", {
class: "oc-text-truncate oc-filter-chip-label",
textContent: S(e.selectedItemNames.length ? e.selectedItemNames[0] : e.filterLabel)
}, null, 8, Ha),
e.selectedItemNames.length > 1 ? (n(), c("span", {
key: 0,
textContent: S(` +${e.selectedItemNames.length - 1}`)
}, null, 8, Ra)) : y("", !0),
!i.value && !e.isToggle ? (n(), b(o, {
key: 1,
name: "arrow-down-s",
size: "small"
})) : y("", !0)
]),
_: 1
}, 8, ["id", "class"]),
e.isToggle ? y("", !0) : (n(), b(pe, {
key: 0,
ref_key: "dropRef",
ref: a,
toggle: "#" + e.id,
class: "oc-filter-chip-drop",
mode: "click",
"padding-size": "small",
"close-on-click": e.closeOnClick,
onHideDrop: d[1] || (d[1] = (C) => s.$emit("hideDrop")),
onShowDrop: d[2] || (d[2] = (C) => s.$emit("showDrop"))
}, {
default: k(() => [
P(s.$slots, "default")
]),
_: 3
}, 8, ["toggle", "close-on-click"])),
i.value ? Y((n(), b(m, {
key: 1,
class: "oc-filter-chip-clear oc-px-xs",
appearance: "raw",
"aria-label": s.$gettext("Clear filter"),
onClick: d[3] || (d[3] = (C) => s.$emit("clearFilter"))
}, {
default: k(() => [
L(o, {
name: "close",
size: "small",
color: "var(--oc-color-text-inverse)"
})
]),
_: 1
}, 8, ["aria-label"])), [
[f, s.$gettext("Clear filter")]
]) : y("", !0)
], 2);
};
}
}), Mt = /* @__PURE__ */ x({
name: "OcGrid",
status: "ready",
release: "1.0.0",
__name: "OcGrid",
props: {
gutter: { default: "collapse" },
flex: { type: Boolean, default: !1 }
},
setup(e) {
const t = u(() => {
const a = [];
return a.push("oc-grid-" + e.gutter), e.flex && (a.push("oc-flex"), a.push("oc-flex-middle")), a;
});
return (a, i) => (n(), c("div", {
class: M(t.value)
}, [
P(a.$slots, "default")
], 2));
}
}), ja = ["id", "aria-live", "textContent"], Ka = /* @__PURE__ */ x({
name: "OcHiddenAnnouncer",
status: "ready",
release: "1.0.0",
__name: "OcHiddenAnnouncer",
props: {
level: { default: "polite" },
announcement: {}
},
setup(e) {
const t = u(() => Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15));
return (a, i) => (n(), c("span", {
id: t.value,
class: "oc-invisible-sr oc-hidden-announcer",
"aria-live": e.level,
"aria-atomic": "true",
textContent: S(e.announcement)
}, null, 8, ja));
}
}), Wa = /* @__PURE__ */ x({
name: "OcList",
status: "ready",
release: "12.0.0",
__name: "OcList",
props: {
raw: { type: Boolean, default: !1 }
},
setup(e) {
return (t, a) => (n(), c("ul", {
class: M(["oc-list oc-my-rm oc-mx-rm", { "oc-list-raw": e.raw }])
}, [
P(t.$slots, "default")
], 2));
}
}), Ga = ["aria-label"], Bt = /* @__PURE__ */ x({
name: "OcLoader",
status: "ready",
release: "1.0.0",
__name: "OcLoader",
props: {
ariaLabel: { default: "Loading" },
flat: { type: Boolean, default: !1 }
},
setup(e) {
return (t, a) => (n(), c("div", {
class: M(["oc-loader", { "oc-loader-flat": e.flat }]),
"aria-label": e.ariaLabel
}, null, 10, Ga));
}
}), st = {};
typeof st == "function" && st(Bt);
const Pt = /* @__PURE__ */ x({
name: "OcLogo",
status: "ready",
release: "7.3.0",
__name: "OcLogo",
props: {
src: {},
alt: {}
},
setup(e) {
return (t, a) => (n(), b(Le, {
class: "oc-logo",
src: e.src,
alt: e.alt
}, null, 8, ["src", "alt"]));
}
}), it = {};
typeof it == "function" && it(Pt);
const Ua = ["value", "type", "disabled"], qa = { class: "oc-flex oc-text-small oc-text-input-password-policy-rule-wrapper oc-pt-s" }, Xa = ["textContent"], rt = "file-copy", Ja = /* @__PURE__ */ x({
name: "OCTextInputPassword",
components: { OcButton: U, OcIcon: j },
status: "ready",
release: "1.0.0",
__name: "OcTextInputPassword",
props: {
value: {},
passwordPolicy: { default: () => ({
rules: [],
check: () => !1,
missing: () => ({ rules: [] })
}) },
generatePasswordMethod: { type: Function, default: null },
hasWarning: { type: Boolean, default: !1 },
hasError: { type: Boolean, default: !1 },
disabled: { type: Boolean, default: !1 }
},
emits: ["passwordChallengeCompleted", "passwordChallengeFailed", "passwordGenerated", "input", "change"],
setup(e, { emit: t }) {
const a = t, i = me(), l = W(null), { $gettext: s } = ie(), d = W(!1), o = W(rt), m = u(() => !!Object.keys(e.passwordPolicy.rules || {}).length), f = u(() => e.passwordPolicy.missing(r(e.value))), C = (T) => {
const g = {};
for (let O = 0; O < T.format.length; O++)
g[`param${O + 1}`] = T.format[O]?.toString();
return s(T.message, g, !0);
}, F = () => {
navigator.clipboard.writeText(r(e.value)), o.value = "check", setTimeout(() => o.value = rt, 500);
}, H = () => {
const T = e.generatePasswordMethod(), g = new Event("input", { bubbles: !0 });
Object.defineProperty(g, "target", { value: l.value }), a("input", g), a("passwordGenerated", T);
};
return se(
() => e.value,
(T) => {
if (Object.keys(e.passwordPolicy).length) {
if (!e.passwordPolicy.check(T))
return a("passwordChallengeFailed");
a("passwordChallengeCompleted");
}
}
), (T, g) => {
const O = J("oc-contextual-helper"), V = J("portal"), w = ce("oc-tooltip");
return n(), c(G, null, [
p("div", {
class: M(["oc-text-input-password-wrapper", {
"oc-text-input-password-wrapper-warning": e.hasWarning,
"oc-text-input-password-wrapper-danger": e.hasError
}])
}, [
p("input", X(r(i), {
ref_key: "passwordInput",
ref: l,
value: e.value,
type: d.value ? "text" : "password",
disabled: e.disabled,
onInput: g[0] || (g[0] = (z) => T.$emit("input", z)),
onChange: g[1] || (g[1] = (z) => T.$emit("change", z))
}), null, 16, Ua),
e.value && !e.disabled ? Y((n(), b(U, {
key: 0,
"aria-label": d.value ? r(s)("Hide password") : r(s)("Show password"),
class: "oc-text-input-show-password-toggle oc-px-s oc-background-default",
appearance: "raw",
size: "small",
onClick: g[2] || (g[2] = (z) => d.value = !d.value)
}, {
default: k(() => [
L(j, {
size: "small",
name: d.value ? "eye-off" : "eye"
}, null, 8, ["name"])
]),
_: 1
}, 8, ["aria-label"])), [
[w, d.value ? r(s)("Hide password") : r(s)("Show password")]
]) : y("", !0),
e.value && !e.disabled ? Y((n(), b(U, {
key: 1,
"aria-label": r(s)("Copy password"),
class: "oc-text-input-copy-password-button oc-px-s oc-background-default",
appearance: "raw",
size: "small",
onClick: F
}, {
default: k(() => [
L(j, {
size: "small",
name: o.value
}, null, 8, ["name"])
]),
_: 1
}, 8, ["aria-label"])), [
[w, r(s)("Copy password")]
]) : y("", !0),
e.generatePasswordMethod && !e.disabled ? Y((n(), b(U, {
key: 2,
"aria-label": r(s)("Generate password"),
class: "oc-text-input-generate-password-button oc-px-s oc-background-default",
appearance: "raw",
size: "small",
onClick: H
}, {
default: k(() => [
L(j, {
size: "small",
name: "refresh",
"fill-type": "line"
})
]),
_: 1
}, 8, ["aria-label"])), [
[w, r(s)("Generate password")]
]) : y("", !0)
], 2),
m.value ? (n(), b(V, {
key: 0,
to: "app.design-system.password-policy"
}, {
default: k(() => [
p("div", qa, [
(n(!0), c(G, null, Z(f.value.rules, (z, q) => (n(), c("div", {
key: q,
class: "oc-flex oc-flex-middle oc-text-input-password-policy-rule"
}, [
L(j, {
size: "small",
class: "oc-mr-xs",
name: z.verified ? "checkbox-circle" : "close-circle",
variation: z.verified ? "success" : "danger"
}, null, 8, ["name", "variation"]),
p("span", {
class: M([
{ "oc-text-input-success": z.verified },
{ "oc-text-input-danger": !z.verified }
]),
textContent: S(C(z))
}, null, 10, Xa),
z.helperMessage ? (n(), b(O, {
key: 0,
text: z.helperMessage,
title: r(s)("Password policy")
}, null, 8, ["text", "title"])) : y("", !0)
]))), 128))
])
]),
_: 1
})) : y("", !0)
], 64);
};
}
}), Qa = ["for", "textContent"], Ya = { class: "oc-position-relative" }, Za = ["id", "textContent"], ze = /* @__PURE__ */ x({
name: "OcTextInput",
status: "ready",
release: "1.0.0",
__name: "OcTextInput",
props: {
id: { default: () => _("oc-textinput-") },
type: { default: "text" },
modelValue: { default: null },
selectionRange: { default: null },
clearButtonEnabled: { type: Boolean, default: !1 },
clearButtonAccessibleLabel: { default: "" },
defaultValue: { default: null },
disabled: { type: Boolean, default: !1 },
label: {},
warningMessage: { default: null },
errorMessage: { default: null },
fixMessageLine: { type: Boolean, default: !1 },
descriptionMessage: { default: null },
readOnly: { type: Boolean, default: !1 },
passwordPolicy: { default: () => ({}) },
generatePasswordMethod: { type: Function, default: null }
},
emits: ["change", "update:modelValue", "focus", "passwordChallengeCompleted", "passwordChallengeFailed", "enterKeyDown"],
setup(e, { expose: t, emit: a }) {
t({
focus: w
});
const i = a, l = me(), { $gettext: s } = ie(), d = Te("input"), o = u(() => e.fixMessageLine || !!e.warningMessage || !!e.errorMessage || !!e.descriptionMessage), m = u(() => `${e.id}-message`), f = u(() => e.type === "password" ? { passwordGenerated: I } : {}), C = u(() => {
const A = {};
(e.warningMessage || e.errorMessage || e.descriptionMessage) && (A["aria-describedby"] = m), e.defaultValue && (A.placeholder = e.defaultValue), e.type === "password" && (A["password-policy"] = e.passwordPolicy, A["generate-password-method"] = e.generatePasswordMethod, A["has-warning"] = !!e.warningMessage, A["has-error"] = !!e.errorMessage);
const { change: v, input: $, focus: E, class: Q, ...h } = me();
return { ...h, ...A };
}), F = u(() => (!!e.errorMessage).toString()), H = u(() => e.errorMessage ? e.errorMessage : e.warningMessage ? e.warningMessage : e.descriptionMessage), T = u(() => !e.disabled && e.clearButtonEnabled && !!e.modelValue), g = u(() => e.clearButtonAccessibleLabel || s("Clear input")), O = u(() => e.modelValue || ""), V = u(() => e.type === "password" ? Ja : "input");
function w() {
d.value.focus();
}
function z() {
w(), I(null), q(null);
}
function q(A) {
i("change", A);
}
function I(A) {
i("update:modelValue", A);
}
async function K(A) {
await he(), A.select(), e.selectionRange && e.selectionRange.length > 1 && A.setSelectionRange(e.selectionRange[0], e.selectionRange[1]), i("focus", A.value);
}
return (A, v) => {
const $ = J("portal-target");
return n(), c("div", {
class: M(r(l).class)
}, [
P(A.$slots, "label", {}, () => [
p("label", {
class: "oc-label",
for: e.id,
textContent: S(e.label)
}, null, 8, Qa)
]),
p("div", Ya, [
e.readOnly ? (n(), b(j, {
key: 0,
name: "lock",
size: "small",
class: "oc-mt-s oc-ml-s oc-position-absolute"
})) : y("", !0),
(n(), b(le(V.value), X({ id: e.id }, C.value, {
ref_key: "input",
ref: d,
"aria-invalid": F.value,
class: ["oc-text-input oc-input oc-rounded", {
"oc-text-input-warning": !!e.warningMessage,
"oc-text-input-danger": !!e.errorMessage,
"oc-pl-l": !!e.readOnly,
"clear-action-visible": T.value
}],
type: e.type,
value: O.value,
disabled: e.disabled || e.readOnly
}, we(f.value), {
onChange: v[0] || (v[0] = (E) => q(E.target.value)),
onInput: v[1] || (v[1] = (E) => I(E.target.value)),
onPasswordChallengeCompleted: v[2] || (v[2] = (E) => A.$emit("passwordChallengeCompleted")),
onPasswordChallengeFailed: v[3] || (v[3] = (E) => A.$emit("passwordChallengeFailed")),
onFocus: v[4] || (v[4] = (E) => K(E.target)),
onKeydown: v[5] || (v[5] = xe((E) => A.$emit("enterKeyDown"), ["enter"]))
}), null, 16, ["id", "aria-invalid", "class", "type", "value", "disabled"])),
T.value ? (n(), b(U, {
key: 1,
"aria-label": g.value,
class: M(["oc-pr-s oc-position-center-right oc-text-input-btn-clear", { "oc-mr-rm": e.type === "date" }]),
appearance: "raw",
onClick: z
}, {
default: k(() => [
L(j, {
name: "close",
size: "small",
variation: "passive"
})
]),
_: 1
}, 8, ["aria-label", "class"])) : y("", !0)
]),
o.value ? (n(), c("div", {
key: 0,
class: M(["oc-text-input-message", {
"oc-text-input-description": !!e.descriptionMessage,
"oc-text-input-warning": !!e.warningMessage,
"oc-text-input-danger": !!e.errorMessage
}])
}, [
H.value !== null && e.descriptionMessage ? (n(), b(j, {
key: 0,
name: "information",
size: "small",
"fill-type": "line",
"accessible-label": "info",
"aria-hidden": "true"
})) : y("", !0),
p("span", {
id: m.value,
class: M({
"oc-text-input-description": !!e.descriptionMessage,
"oc-text-input-warning": !!e.warningMessage,
"oc-text-input-danger": !!e.errorMessage
}),
textContent: S(H.value)
}, null, 10, Za)
], 2)) : y("", !0),
e.type === "password" ? (n(), b($, {
key: 1,
name: "app.design-system.password-policy"
})) : y("", !0)
], 2);
};
}
}), ct = {};
typeof ct == "function" && ct(ze);
const _a = { class: "oc-modal-background" }, en = ["id"], tn = { class: "oc-modal-title" }, an = ["textContent"], nn = { class: "oc-modal-body" }, ln = {
key: "modal-slot-content",
class: "oc-modal-body-message"
}, on = ["textContent"], sn = ["textContent"], rn = {
key: 0,
class: "oc-modal-body-actions oc-flex oc-flex-right"
}, cn = { class: "oc-modal-body-actions-grid" }, un = /* @__PURE__ */ x({
name: "OcModal",
status: "ready",
release: "1.3.0",
__name: "OcModal",
props: {
elementId: { default: null },
elementClass: { default: null },
variation: { default: "passive" },
icon: { default: null },
title: {},
message: { default: null },
contextualHelperLabel: { default: "" },
contextualHelperData: { default: null },
buttonCancelText: { default: "Cancel" },
buttonConfirmText: { default: "Confirm" },
buttonConfirmDisabled: { type: Boolean, default: !1 },
hideConfirmButton: { type: Boolean, default: !1 },
hasInput: { type: Boolean, default: !1 },
inputType: { default: "text" },
inputValue: { default: null },
inputSelectionRange: { default: null },
inputLabel: { default: null },
inputDescription: { default: null },
inputError: { default: null },
focusTrapInitial: { type: [String, Boolean], default: null },
hideActions: { type: Boolean, default: !1 },
isLoading: { type: Boolean, default: !1 }
},
emits: ["cancel", "confirm", "input"],
setup(e, { emit: t }) {
const a = t, i = W(), l = W(!1), s = W("filled"), d = W(), o = W(), m = u(() => ({
getShadowRoot: !0
})), f = () => {
l.value = !1, s.value = "filled";
}, C = () => {
l.value = !0, s.value = "outline";
};
function F() {
a("cancel");
}
function H() {
e.buttonConfirmDisabled || e.inputError || a("confirm", r(i));
}
function T(w) {
a("input", w);
}
se(
() => e.isLoading,
() => {
if (!e.isLoading)
return f();
setTimeout(() => {
if (!e.isLoading)
return f();
C();
}, 700);
},
{ immediate: !0 }
), se(
() => e.inputValue,
(w) => {
i.value = w;
},
{ immediate: !0 }
);
const g = u(() => e.focusTrapInitial || e.focusTrapInitial === !1 ? e.focusTrapInitial : () => r(o)?.$el || r(d)), O = u(() => ["oc-modal", `oc-modal-${e.variation}`, e.elementClass]), V = u(() => {
if (e.icon)
return e.icon;
switch (e.variation) {
case "danger":
return "alert";
case "warning":
return "error-warning";
case "success":
return "checkbox-circle";
case "info":
return "information";
default:
return "";
}
});
return (w, z) => {
const q = J("oc-contextual-helper");
return n(), c("div", _a, [
L(r($t), {
active: !0,
"initial-focus": g.value,
"tabbable-options": m.value
}, {
default: k(() => [
p("div", {
id: e.elementId,
ref_key: "ocModal",
ref: d,
class: M(O.value),
tabindex: "0",
role: "dialog",
"aria-modal": "true",
"aria-labelledby": "oc-modal-title",
onKeydown: xe(F, ["esc"])
}, [
p("div", tn, [
V.value !== "" ? (n(), b(j, {
key: 0,
name: V.value,
variation: e.variation
}, null, 8, ["name", "variation"])) : y("", !0),
p("h2", {
id: "oc-modal-title",
class: "oc-text-truncate",
textContent: S(e.title)
}, null, 8, an)
]),
p("div", nn, [
w.$slots.content ? (n(), c("div", ln, [
P(w.$slots, "content")
])) : (n(), c(G, { key: 1 }, [
e.message ? (n(), c("p", {
key: "modal-message",
class: M(["oc-modal-body-message oc-mt-rm", { "oc-mb-rm": !e.hasInput || e.contextualHelperData }]),
textContent: S(e.message)
}, null, 10, on)) : y("", !0),
e.contextualHelperData ? (n(), c("div", {
key: 1,
class: M(["oc-modal-body-contextual-helper", { "oc-mb-rm": !e.hasInput }])
}, [
p("span", {
class: "text",
textContent: S(e.contextualHelperLabel)
}, null, 8, sn),
L(q, X({ class: "oc-pl-xs" }, e.contextualHelperData), null, 16)
], 2)) : y("", !0),
e.hasInput ? (n(), b(ze, {
key: "modal-input",
ref_key: "ocModalInput",
ref: o,
modelValue: i.value,
"onUpdate:modelValue": [
z[0] || (z[0] = (I) => i.value = I),
T
],
class: "oc-modal-body-input",
"error-message": e.inputError,
label: e.inputLabel,
type: e.inputType,
"description-message": e.inputDescription,
"fix-message-line": !0,
"selection-range": e.inputSelectionRange,
onEnterKeyDown: H
}, null, 8, ["modelValue", "error-message", "label", "type", "description-message", "selection-range"])) : y("", !0)
], 64))
]),
e.hideActions ? y("", !0) : (n(), c("div", rn, [
p("div", cn, [
L(U, {
class: "oc-modal-body-actions-cancel",
variation: "passive",
appearance: "outline",
disabled: e.isLoading,
onClick: F
}, {
default: k(() => [
ae(S(w.$gettext(e.buttonCancelText)), 1)
]),
_: 1
}, 8, ["disabled"]),
e.hideConfirmButton ? y("", !0) : (n(), b(U, {
key: 0,
class: "oc-modal-body-actions-confirm oc-ml-s",
variation: "primary",
appearance: s.value,
disabled: e.isLoading || e.buttonConfirmDisabled || !!e.inputError,
"show-spinner": l.value,
onClick: H
}, {
default: k(() => [
ae(S(w.$gettext(e.buttonConfirmText)), 1)
]),
_: 1
}, 8, ["appearance", "disabled", "show-spinner"]))
])
]))
], 42, en)
]),
_: 3
}, 8, ["initial-focus", "tabbable-options"])
]);
};
}
}), dn = { class: "oc-error-log" }, fn = { class: "oc-flex oc-flex-between oc-mt-s" }, mn = { class: "oc-flex" }, hn = {
key: 0,
class: "oc-flex oc-flex-middle"
}, gn = ["textContent"], It = /* @__PURE__ */ x({
name: "OcErrorLog",
status: "ready",
release: "2.0.0",
__name: "OcErrorLog",
props: {
content: {}
},
setup(e) {
const { $gettext: t } = ie(), a = W(!1), i = u(() => t(
"Copy the following information and pass them to technical support to troubleshoot the problem:"
)), l = () => {
navigator.clipboard.writeText(e.content), a.value = !0, setTimeout(() => a.value = !1, 500);
};
return (s, d) => {
const o = J("oc-textarea"), m = J("oc-icon"), f = J("oc-button");
return n(), c("div", dn, [
L(o, {
class: "oc-error-log-textarea oc-mt-s oc-text-small",
label: i.value,
"model-value": e.content,
rows: "4",
readonly: ""
}, null, 8, ["label", "model-value"]),
p("div", fn, [
p("div", mn, [
a.value ? (n(), c("div", hn, [
L(m, {
variation: "success",
name: "checkbox-circle"
}),
p("p", {
class: "oc-error-log-content-copied oc-ml-s oc-my-rm",
textContent: S(r(t)("Copied"))
}, null, 8, gn)
])) : y("", !0)
]),
L(f, {
size: "small",
variation: "primary",
appearance: "filled",
onClick: l
}, {
default: k(() => [
ae(S(r(t)("Copy")), 1)
]),
_: 1
})
])
]);
};
}
}), bn = ["role", "aria-live"], pn = { class: "oc-flex oc-flex-middle oc-flex-between oc-width-1-1" }, yn = { class: "oc-flex oc-flex-middle" }, vn = { class: "oc-notification-message-title" }, wn = {
key: 0,
class: "oc-flex oc-flex-between oc-width-1-1 oc-mt-s"
}, xn = ["textContent"], $n = ["textContent"], On = /* @__PURE__ */ x({
name: "OcNotificationMessage",
status: "ready",
release: "1.0.0",
__name: "OcNotificationMessage",
props: {
status: { default: "passive" },
title: {},
message: { default: null },
errorLogContent: { default: null },
timeout: { default: 5 }
},
emits: ["close"],
setup(e, { emit: t }) {
const a = t, i = W(!1);
function l() {
a("close");
}
const s = u(() => `oc-notification-message-${e.status}`), d = u(() => e.status), o = u(() => e.status === "danger"), m = u(() => o.value ? "alert" : "status"), f = u(() => o.value ? "assertive" : "polite");
return De(() => {
e.timeout !== 0 && setTimeout(() => {
l();
}, e.timeout * 1e3);
}), (C, F) => (n(), c("div", {
class: M(["oc-fade-in oc-flex oc-flex-wrap oc-notification-message oc-box-shadow-medium oc-rounded oc-p-m", s.value])
}, [
p("div", {
class: "oc-flex oc-flex-wrap oc-flex-middle oc-flex-1",
role: m.value,
"aria-live": f.value
}, [
p("div", pn, [
p("div", yn, [
L(j, {
variation: d.value,
name: "information",
"fill-type": "line",
class: "oc-mr-s"
}, null, 8, ["variation"]),
p("div", vn, S(e.title), 1)
]),
L(U, {
appearance: "raw",
"aria-label": C.$gettext("Close"),
onClick: l
}, {
default: k(() => [
L(j, { name: "close" })
]),
_: 1
}, 8, ["aria-label"])
]),
e.message || e.errorLogContent ? (n(), c("div", wn, [
e.message ? (n(), c("span", {
key: 0,
class: "oc-notification-message-content oc-text-muted oc-mr-s",
textContent: S(e.message)
}, null, 8, xn)) : y("", !0),
e.errorLogContent ? (n(), b(U, {
key: 1,
class: "oc-notification-message-error-log-toggle-button",
"gap-size": "none",
appearance: "raw",
onClick: F[0] || (F[0] = (H) => i.value = !i.value)
}, {
default: k(() => [
p("span", {
textContent: S(C.$gettext("Details"))
}, null, 8, $n),
L(j, {
name: i.value ? "arrow-up-s" : "arrow-down-s"
}, null, 8, ["name"])
]),
_: 1
})) : y("", !0)
])) : y("", !0),
i.value ? (n(), b(It, {
key: 1,
class: "oc-mt-m",
content: e.errorLogContent
}, null, 8, ["content"])) : y("", !0)
], 8, bn)
], 2));
}
}), kn = /* @__PURE__ */ x({
name: "OcNotifications",
status: "ready",
release: "1.0.0",
__name: "OcNotifications",
props: {
position: { default: "default" }
},
setup(e) {
const t = u(() => `oc-notification-${e.position}`);
return (a, i) => (n(), c("div", {
class: M(["oc-notification oc-mb-s", t.value])
}, [
P(a.$slots, "default")
], 2));
}
});
var Cn = Object.defineProperty, Sn = Object.defineProperties, Tn = Object.getOwnPropertyDescriptors, ut = Object.getOwnPropertySymbols, Dn = Object.prototype.hasOwnProperty, Ln = Object.prototype.propertyIsEnumerable, dt = (e, t, a) => t in e ? Cn(e, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[t] = a, fe = (e, t) => {
for (var a in t || (t = {}))
Dn.call(t, a) && dt(e, a, t[a]);
if (ut)
for (var a of ut(t))
Ln.call(t, a) && dt(e, a, t[a]);
return e;
}, ft = (e, t) => Sn(e, Tn(t));
const Mn = {
props: {
autoscroll: {
type: Boolean,
default: !0
}
},
watch: {
typeAheadPointer() {
this.autoscroll && this.maybeAdjustScroll();
},
open(e) {
this.autoscroll && e && this.$nextTick(() => this.maybeAdjustScroll());
}
},
methods: {
maybeAdjustScroll() {
var e;
const t = ((e = this.$refs.dropdownMenu) == null ? void 0 : e.children[this.typeAheadPointer]) || !1;
if (t) {
const a = this.getDropdownViewport(), { top: i, bottom: l, height: s } = t.getBoundingClientRect();
if (i < a.top)
return this.$refs.dropdownMenu.scrollTop = t.offsetTop;
if (l > a.bottom)
return this.$refs.dropdownMenu.scrollTop = t.offsetTop - (a.height - s);
}
},
getDropdownViewport() {
return this.$refs.dropdownMenu ? this.$refs.dropdownMenu.getBoundingClientRect() : {
height: 0,
top: 0,
bottom: 0
};
}
}
}, Bn = {
data() {
return {
typeAheadPointer: -1
};
},
watch: {
filteredOptions() {
for (let e = 0; e < this.filteredOptions.length; e++)
if (this.selectable(this.filteredOptions[e])) {
this.typeAheadPointer = e;
break;
}
},
open(e) {
e && this.typeAheadToLastSelected();
},
selectedValue() {
this.open && this.typeAheadToLastSelected();
}
},
methods: {
typeAheadUp() {
for (let e = this.typeAheadPointer - 1; e >= 0; e--)
if (this.selectable(this.filteredOptions[e])) {
this.typeAheadPointer = e;
break;
}
},
typeAheadDown() {
for (let e = this.typeAheadPointer + 1; e < this.filteredOptions.length; e++)
if (this.selectable(this.filteredOptions[e])) {
this.typeAheadPointer = e;
break;
}
},
typeAheadSelect() {
const e = this.filteredOptions[this.typeAheadPointer];
e && this.selectable(e) && this.select(e);
},
typeAheadToLastSelected() {
this.typeAheadPointer = this.selectedValue.length !== 0 ? this.filteredOptions.indexOf(this.selectedValue[this.selectedValue.length - 1]) : -1;
}
}
}, Pn = {
props: {
loading: {
type: Boolean,
default: !1
}
},
data() {
return {
mutableLoading: !1
};
},
watch: {
search() {
this.$emit("search", this.search, this.toggleLoading);
},
loading(e) {
this.mutableLoading = e;
}
},
methods: {
toggleLoading(e = null) {
return e == null ? this.mutableLoading = !this.mutableLoading : this.mutableLoading = e;
}
}
}, Ee = (e, t) => {
const a = e.__vccOpts || e;
for (const [i, l] of t)
a[i] = l;
return a;
}, In = {}, An = {
xmlns: "http://www.w3.org/2000/svg",
width: "10",
height: "10"
}, Vn = /* @__PURE__ */ p("path", { d: "M6.895455 5l2.842897-2.842898c.348864-.348863.348864-.914488 0-1.263636L9.106534.261648c-.348864-.348864-.914489-.348864-1.263636 0L5 3.104545 2.157102.261648c-.348863-.348864-.914488-.348864-1.263636 0L.261648.893466c-.348864.348864-.348864.914489 0 1.263636L3.104545 5 .261648 7.842898c-.348864.348863-.348864.914488 0 1.263636l.631818.631818c.348864.348864.914773.348864 1.263636 0L5 6.895455l2.842898 2.842897c.348863.348864.914772.348864 1.263636 0l.631818-.631818c.348864-.348864.348864-.914489 0-1.263636L6.895455 5z" }, null, -1), zn = [
Vn
];
function En(e, t) {
return n(), c("svg", An, zn);
}
const Fn = /* @__PURE__ */ Ee(In, [["render", En]]), Hn = {}, Rn = {
xmlns: "http://www.w3.org/2000/svg",
width: "14",
height: "10"
}, Nn = /* @__PURE__ */ p("path", { d: "M9.211364 7.59931l4.48338-4.867229c.407008-.441854.407008-1.158247 0-1.60046l-.73712-.80023c-.407008-.441854-1.066904-.441854-1.474243 0L7 5.198617 2.51662.33139c-.407008-.441853-1.066904-.441853-1.474243 0l-.737121.80023c-.407008.441854-.407008 1.158248 0 1.600461l4.48338 4.867228L7 10l2.211364-2.40069z" }, null, -1), jn = [
Nn
];
function Kn(e, t) {
return n(), c("svg", Rn, jn);
}
const Wn = /* @__PURE__ */ Ee(Hn, [["render", Kn]]), mt = {
Deselect: Fn,
OpenIndicator: Wn
}, Gn = {
mounted(e, { instance: t }) {
if (t.appendToBody) {
const {
height: a,
top: i,
left: l,
width: s
} = t.$refs.toggle.getBoundingClientRect();
let d = window.scrollX || window.pageXOffset, o = window.scrollY || window.pageYOffset;
e.unbindPosition = t.calculatePosition(e, t, {
width: s + "px",
left: d + l + "px",
top: o + i + a + "px"
}), document.body.appendChild(e);
}
},
unmounted(e, { instance: t }) {
t.appendToBody && (e.unbindPosition && typeof e.unbindPosition == "function" && e.unbindPosition(), e.parentNode && e.parentNode.removeChild(e));
}
};
function Un(e) {
const t = {};
return Object.keys(e).sort().forEach((a) => {
t[a] = e[a];
}), JSON.stringify(t);
}
let qn = 0;
function Xn() {
return ++qn;
}
const Jn = {
components: fe({}, mt),
directives: { appendToBody: Gn },
mixins: [Mn, Bn, Pn],
compatConfig: {
MODE: 3
},
emits: [
"open",
"close",
"update:modelValue",
"search",
"search:compositionstart",
"search:compositionend",
"search:keydown",
"search:blur",
"search:focus",
"search:input",
"option:created",
"option:selecting",
"option:selected",
"option:deselecting",
"option:deselected"
],
props: {
modelValue: {},
components: {
type: Object,
default: () => ({})
},
options: {
type: Array,
default() {
return [];
}
},
disabled: {
type: Boolean,
default: !1
},
clearable: {
type: Boolean,
default: !0
},
deselectFromDropdown: {
type: Boolean,
default: !1
},
searchable: {
type: Boolean,
default: !0
},
multiple: {
type: Boolean,
default: !1
},
placeholder: {
type: String,
default: ""
},
transition: {
type: String,
default: "vs__fade"
},
clearSearchOnSelect: {
type: Boolean,
default: !0
},
closeOnSelect: {
type: Boolean,
default: !0
},
label: {
type: String,
default: "label"
},
autocomplete: {
type: String,
default: "off"
},
reduce: {
type: Function,
default: (e) => e
},
selectable: {
type: Function,
default: (e) => !0
},
getOptionLabel: {
type: Function,
default(e) {
return typeof e == "object" ? e.hasOwnProperty(this.label) ? e[this.label] : console.warn(`[vue-select warn]: Label key "option.${this.label}" does not exist in options object ${JSON.stringify(e)}.
https://vue-select.org/api/props.html#getoptionlabel`) : e;
}
},
getOptionKey: {
type: Function,
default(e) {
if (typeof e != "object")
return e;
try {
return e.hasOwnProperty("id") ? e.id : Un(e);
} catch (t) {
return console.warn(`[vue-select warn]: Could not stringify this option to generate unique key. Please provide'getOptionKey' prop to return a unique key for each option.
https://vue-select.org/api/props.html#getoptionkey`, e, t);
}
}
},
onTab: {
type: Function,
default: function() {
this.selectOnTab && !this.isComposing && this.typeAheadSelect();
}
},
taggable: {
type: Boolean,
default: !1
},
tabindex: {
type: Number,
default: null
},
pushTags: {
type: Boolean,
default: !1
},
filterable: {
type: Boolean,
default: !0
},
filterBy: {
type: Function,
default(e, t, a) {
return (t || "").toLocaleLowerCase().indexOf(a.toLocaleLowerCase()) > -1;
}
},
filter: {
type: Function,
default(e, t) {
return e.filter((a) => {
let i = this.getOptionLabel(a);
return typeof i == "number" && (i = i.toString()), this.filterBy(a, i, t);
});
}
},
createOption: {
type: Function,
default(e) {
return typeof this.optionList[0] == "object" ? { [this.label]: e } : e;
}
},
resetOnOptionsChange: {
default: !1,
validator: (e) => ["function", "boolean"].includes(typeof e)
},
clearSearchOnBlur: {
type: Function,
default: function({ clearSearchOnSelect: e, multiple: t }) {
return e && !t;
}
},
noDrop: {
type: Boolean,
default: !1
},
inputId: {
type: String
},
dir: {
type: String,
default: "auto"
},
selectOnTab: {
type: Boolean,
default: !1
},
selectOnKeyCodes: {
type: Array,
default: () => [13]
},
searchInputQuerySelector: {
type: String,
default: "[type=search]"
},
mapKeydown: {
type: Function,
default: (e, t) => e
},
appendToBody: {
type: Boolean,
default: !1
},
calculatePosition: {
type: Function,
default(e, t, { width: a, top: i, left: l }) {
e.style.top = i, e.style.left = l, e.style.width = a;
}
},
dropdownShouldOpen: {
type: Function,
default({ noDrop: e, open: t, mutableLoading: a }) {
return e ? !1 : t && !a;
}
},
uid: {
type: [String, Number],
default: () => Xn()
}
},
data() {
return {
search: "",
open: !1,
isComposing: !1,
pushedTags: [],
_value: [],
deselectButtons: []
};
},
computed: {
isReducingValues() {
return this.$props.reduce !== this.$options.props.reduce.default;
},
isTrackingValues() {
return typeof this.modelValue > "u" || this.isReducingValues;
},
selectedValue() {
let e = this.modelValue;
return this.isTrackingValues && (e = this.$data._value), e != null && e !== "" ? [].concat(e) : [];
},
optionList() {
return this.options.concat(this.pushTags ? this.pushedTags : []);
},
searchEl() {
return this.$slots.search ? this.$refs.selectedOptions.querySelector(this.searchInputQuerySelector) : this.$refs.search;
},
scope() {
const e = {
search: this.search,
loading: this.loading,
searching: this.searching,
filteredOptions: this.filteredOptions
};
return {
search: {
attributes: fe({
disabled: this.disabled,
placeholder: this.searchPlaceholder,
tabindex: this.tabindex,
readonly: !this.searchable,
id: this.inputId,
"aria-autocomplete": "list",
"aria-labelledby": `vs${this.uid}__combobox`,
"aria-controls": `vs${this.uid}__listbox`,
ref: "search",
type: "search",
autocomplete: this.autocomplete,
value: this.search
}, this.dropdownOpen && this.filteredOptions[this.typeAheadPointer] ? {
"aria-activedescendant": `vs${this.uid}__option-${this.typeAheadPointer}`
} : {}),
events: {
compositionstart: () => this.isComposing = !0,
compositionend: () => this.isComposing = !1,
keydown: this.onSearchKeyDown,
blur: this.onSearchBlur,
focus: this.onSearchFocus,
input: (t) => this.search = t.target.value
}
},
spinner: {
loading: this.mutableLoading
},
noOptions: {
search: this.search,
loading: this.mutableLoading,
searching: this.searching
},
openIndicator: {
attributes: {
ref: "openIndicator",
role: "presentation",
class: "vs__open-indicator"
}
},
listHeader: e,
listFooter: e,
header: ft(fe({}, e), { deselect: this.deselect }),
footer: ft(fe({}, e), { deselect: this.deselect })
};
},
childComponents() {
return fe(fe({}, mt), this.components);
},
stateClasses() {
return {
"vs--open": this.dropdownOpen,
"vs--single": !this.multiple,
"vs--multiple": this.multiple,
"vs--searching": this.searching && !this.noDrop,
"vs--searchable": this.searchable && !this.noDrop,
"vs--unsearchable": !this.searchable,
"vs--loading": this.mutableLoading,
"vs--disabled": this.disabled
};
},
searching() {
return !!this.search;
},
dropdownOpen() {
return this.dropdownShouldOpen(this);
},
searchPlaceholder() {
return this.isValueEmpty && this.placeholder ? this.placeholder : void 0;
},
filteredOptions() {
const e = [].concat(this.optionList);
if (!this.filterable && !this.taggable)
return e;
const t = this.search.length ? this.filter(e, this.search, this) : e;
if (this.taggable && this.search.length) {
const a = this.createOption(this.search);
this.optionExists(a) || t.unshift(a);
}
return t;
},
isValueEmpty() {
return this.selectedValue.length === 0;
},
showClearButton() {
return !this.multiple && this.clearable && !this.open && !this.isValueEmpty;
}
},
watch: {
options(e, t) {
const a = () => typeof this.resetOnOptionsChange == "function" ? this.resetOnOptionsChange(e, t, this.selectedValue) : this.resetOnOptionsChange;
!this.taggable && a() && this.clearSelection(), this.modelValue && this.isTrackingValues && this.setInternalValueFromOptions(this.modelValue);
},
modelValue: {
immediate: !0,
handler(e) {
this.isTrackingValues && this.setInternalValueFromOptions(e);
}
},
multiple() {
this.clearSelection();
},
open(e) {
this.$emit(e ? "open" : "close");
}
},
created() {
this.mutableLoading = this.loading;
},
methods: {
setInternalValueFromOptions(e) {
Array.isArray(e) ? this.$data._value = e.map((t) => this.findOptionFromReducedValue(t)) : this.$data._value = this.findOptionFromReducedValue(e);
},
select(e) {
this.$emit("option:selecting", e), this.isOptionSelected(e) ? this.deselectFromDropdown && (this.clearable || this.multiple && this.selectedValue.length > 1) && this.deselect(e) : (this.taggable && !this.optionExists(e) && (this.$emit("option:created", e), this.pushTag(e)), this.multiple && (e = this.selectedValue.concat(e)), this.updateValue(e), this.$emit("option:selected", e)), this.onAfterSelect(e);
},
deselect(e) {
this.$emit("option:deselecting", e), this.updateValue(this.selectedValue.filter((t) => !this.optionComparator(t, e))), this.$emit("option:deselected", e);
},
clearSelection() {
this.updateValue(this.multiple ? [] : null);
},
onAfterSelect(e) {
this.closeOnSelect && (this.open = !this.open, this.searchEl.blur()), this.clearSearchOnSelect && (this.search = "");
},
updateValue(e) {
typeof this.modelValue > "u" && (this.$data._value = e), e !== null && (Array.isArray(e) ? e = e.map((t) => this.reduce(t)) : e = this.reduce(e)), this.$emit("update:modelValue", e);
},
toggleDropdown(e) {
const t = e.target !== this.searchEl;
t && e.preventDefault();
const a = [
...this.deselectButtons || [],
this.$refs.clearButton
];
if (this.searchEl === void 0 || a.filter(Boolean).some((i) => i.contains(e.target) || i === e.target)) {
e.preventDefault();
return;
}
this.open && t ? this.searchEl.blur() : this.disabled || (this.open = !0, this.searchEl.focus());
},
isOptionSelected(e) {
return this.selectedValue.some((t) => this.optionComparator(t, e));
},
isOptionDeselectable(e) {
return this.isOptionSelected(e) && this.deselectFromDropdown;
},
optionComparator(e, t) {
return this.getOptionKey(e) === this.getOptionKey(t);
},
findOptionFromReducedValue(e) {
const t = (i) => JSON.stringify(this.reduce(i)) === JSON.stringify(e), a = [...this.options, ...this.pushedTags].filter(t);
return a.length === 1 ? a[0] : a.find((i) => this.optionComparator(i, this.$data._value)) || e;
},
closeSearchOptions() {
this.open = !1, this.$emit("search:blur");
},
maybeDeleteValue() {
if (!this.searchEl.value.length && this.selectedValue && this.selectedValue.length && this.clearable) {
let e = null;
this.multiple && (e = [
...this.selectedValue.slice(0, this.selectedValue.length - 1)
]), this.updateValue(e);
}
},
optionExists(e) {
return this.optionList.some((t) => this.optionComparator(t, e));
},
normalizeOptionForSlot(e) {
return typeof e == "object" ? e : { [this.label]: e };
},
pushTag(e) {
this.pushedTags.push(e);
},
onEscape() {
this.search.length ? this.search = "" : this.searchEl.blur();
},
onSearchBlur() {
if (this.mousedown && !this.searching)
this.mousedown = !1;
else {
const { clearSearchOnSelect: e, multiple: t } = this;
this.clearSearchOnBlur({ clearSearchOnSelect: e, multiple: t }) && (this.search = ""), this.closeSearchOptions();
return;
}
if (this.search.length === 0 && this.options.length === 0) {
this.closeSearchOptions();
return;
}
},
onSearchFocus() {
this.open = !0, this.$emit("search:focus");
},
onMousedown() {
this.mousedown = !0;
},
onMouseUp() {
this.mousedown = !1;
},
onSearchKeyDown(e) {
const t = (l) => (l.preventDefault(), !this.isComposing && this.typeAheadSelect()), a = {
8: (l) => this.maybeDeleteValue(),
9: (l) => this.onTab(),
27: (l) => this.onEscape(),
38: (l) => (l.preventDefault(), this.typeAheadUp()),
40: (l) => (l.preventDefault(), this.typeAheadDown())
};
this.selectOnKeyCodes.forEach((l) => a[l] = t);
const i = this.mapKeydown(a, this);
if (typeof i[e.keyCode] == "function")
return i[e.keyCode](e);
}
}
}, Qn = ["dir"], Yn = ["id", "aria-expanded", "aria-owns"], Zn = {
ref: "selectedOptions",
class: "vs__selected-options"
}, _n = ["disabled", "title", "aria-label", "onClick"], el = {
ref: "actions",
class: "vs__actions"
}, tl = ["disabled"], al = { class: "vs__spinner" }, nl = ["id"], ll = ["id", "aria-selected", "onMouseover", "onClick"], ol = {
key: 0,
class: "vs__no-options"
}, sl = /* @__PURE__ */ ae(" Sorry, no matching options. "), il = ["id"];
function rl(e, t, a, i, l, s) {
const d = ce("append-to-body");
return n(), c("div", {
dir: a.dir,
class: M(["v-select", s.stateClasses])
}, [
P(e.$slots, "header", ee(ne(s.scope.header))),
p("div", {
id: `vs${a.uid}__combobox`,
ref: "toggle",
class: "vs__dropdown-toggle",
role: "combobox",
"aria-expanded": s.dropdownOpen.toString(),
"aria-owns": `vs${a.uid}__listbox`,
"aria-label": "Search for option",
onMousedown: t[1] || (t[1] = (o) => s.toggleDropdown(o))
}, [
p("div", Zn, [
(n(!0), c(G, null, Z(s.selectedValue, (o, m) => P(e.$slots, "selected-option-container", {
option: s.normalizeOptionForSlot(o),
deselect: s.deselect,
multiple: a.multiple,
disabled: a.disabled
}, () => [
(n(), c("span", {
key: a.getOptionKey(o),
class: "vs__selected"
}, [
P(e.$slots, "selected-option", ee(ne(s.normalizeOptionForSlot(o))), () => [
ae(S(a.getOptionLabel(o)), 1)
]),
a.multiple ? (n(), c("button", {
key: 0,
ref_for: !0,
ref: (f) => l.deselectButtons[m] = f,
disabled: a.disabled,
type: "button",
class: "vs__deselect",
title: `Deselect ${a.getOptionLabel(o)}`,
"aria-label": `Deselect ${a.getOptionLabel(o)}`,
onClick: (f) => s.deselect(o)
}, [
(n(), b(le(s.childComponents.Deselect)))
], 8, _n)) : y("", !0)
]))
])), 256)),
P(e.$slots, "search", ee(ne(s.scope.search)), () => [
p("input", X({ class: "vs__search" }, s.scope.search.attributes, we(s.scope.search.events)), null, 16)
])
], 512),
p("div", el, [
Y(p("button", {
ref: "clearButton",
disabled: a.disabled,
type: "button",
class: "vs__clear",
title: "Clear Selected",
"aria-label": "Clear Selected",
onClick: t[0] || (t[0] = (...o) => s.clearSelection && s.clearSelection(...o))
}, [
(n(), b(le(s.childComponents.Deselect)))
], 8, tl), [
[ye, s.showClearButton]
]),
P(e.$slots, "open-indicator", ee(ne(s.scope.openIndicator)), () => [
a.noDrop ? y("", !0) : (n(), b(le(s.childComponents.OpenIndicator), ee(X({ key: 0 }, s.scope.openIndicator.attributes)), null, 16))
]),
P(e.$slots, "spinner", ee(ne(s.scope.spinner)), () => [
Y(p("div", al, "Loading...", 512), [
[ye, e.mutableLoading]
])
])
], 512)
], 40, Yn),
L(jt, { name: a.transition }, {
default: k(() => [
s.dropdownOpen ? Y((n(), c("ul", {
id: `vs${a.uid}__listbox`,
ref: "dropdownMenu",
key: `vs${a.uid}__listbox`,
class: "vs__dropdown-menu",
role: "listbox",
tabindex: "-1",
onMousedown: t[2] || (t[2] = re((...o) => s.onMousedown && s.onMousedown(...o), ["prevent"])),
onMouseup: t[3] || (t[3] = (...o) => s.onMouseUp && s.onMouseUp(...o))
}, [
P(e.$slots, "list-header", ee(ne(s.scope.listHeader))),
(n(!0), c(G, null, Z(s.filteredOptions, (o, m) => (n(), c("li", {
id: `vs${a.uid}__option-${m}`,
key: a.getOptionKey(o),
role: "option",
class: M(["vs__dropdown-option", {
"vs__dropdown-option--deselect": s.isOptionDeselectable(o) && m === e.typeAheadPointer,
"vs__dropdown-option--selected": s.isOptionSelected(o),
"vs__dropdown-option--highlight": m === e.typeAheadPointer,
"vs__dropdown-option--disabled": !a.selectable(o)
}]),
"aria-selected": m === e.typeAheadPointer ? !0 : null,
onMouseover: (f) => a.selectable(o) ? e.typeAheadPointer = m : null,
onClick: re((f) => a.selectable(o) ? s.select(o) : null, ["prevent", "stop"])
}, [
P(e.$slots, "option", ee(ne(s.normalizeOptionForSlot(o))), () => [
ae(S(a.getOptionLabel(o)), 1)
])
], 42, ll))), 128)),
s.filteredOptions.length === 0 ? (n(), c("li", ol, [
P(e.$slots, "no-options", ee(ne(s.scope.noOptions)), () => [
sl
])
])) : y("", !0),
P(e.$slots, "list-footer", ee(ne(s.scope.listFooter)))
], 40, nl)), [
[d]
]) : (n(), c("ul", {
key: 1,
id: `vs${a.uid}__listbox`,
role: "listbox",
style: { display: "none", visibility: "hidden" }
}, null, 8, il))
]),
_: 3
}, 8, ["name"]),
P(e.$slots, "footer", ee(ne(s.scope.footer)))
], 10, Qn);
}
const ht = /* @__PURE__ */ Ee(Jn, [["render", rl]]), cl = ["for", "textContent"], ul = ["textContent"], dl = {
key: 0,
class: "oc-flex oc-flex-middle oc-ml-s oc-mr-xs"
}, fl = ["id", "textContent"], At = /* @__PURE__ */ x({
name: "OcSelect",
status: "ready",
release: "4.3.0",
// needed for unit testing, otherwise, it will be rendered as anonymous component -->
components: { VueSelect: ht },
__name: "OcSelect",
props: {
id: { default: () => _("oc-select-") },
filter: { type: Function, default: (e, t, { label: a }) => {
if (e.length < 1)
return [];
const i = new ra(e, {
...a && { keys: [a] },
shouldSort: !0,
threshold: 0,
ignoreLocation: !0,
distance: 100,
minMatchCharLength: 1
});
return t.length ? i.search(t).map(({ item: l }) => l) : e;
} },
disabled: { type: Boolean, default: !1 },
label: {},
labelHidden: { type: Boolean, default: !1 },
contextualHelper: { default: null },
optionLabel: { default: "label" },
getOptionLabel: { type: Function, default: null },
searchable: { type: Boolean, default: !0 },
clearable: { type: Boolean, default: !1 },
loading: { type: Boolean, default: !1 },
warningMessage: { default: null },
errorMessage: { default: null },
fixMessageLine: { type: Boolean, default: !1 },
descriptionMessage: { default: null },
multiple: { type: Boolean, default: !1 },
readOnly: { type: Boolean, default: !1 },
positionFixed: { type: Boolean, default: !1 }
},
emits: ["search:input", "update:modelValue"],
setup(e, { emit: t }) {
const a = t, { $gettext: i } = ie(), l = W(), s = me(), d = () => {
r(l).$el.querySelector(
"div:first-child"
)?.setAttribute("aria-label", `${e.label} - ${i("Search for option")}`);
}, o = (v) => {
a("search:input", v.target.value);
}, m = W(!1), f = (v) => {
m.value = v;
}, C = ({
noDrop: v,
open: $,
mutableLoading: E
}) => !v && $ && !E && r(m), F = () => {
f(!0);
}, H = () => {
f(!1);
}, T = async () => {
const $ = r(l).$refs.dropdownMenu.querySelectorAll("li")[r(l).typeAheadPointer];
$ && (await he(), $.classList.add("keyboard-outline"));
}, g = (v) => ({
...v,
13: ($) => {
if (!r(m)) {
f(!0);
return;
}
v[
13
/* Enter */
]($), r(l).searchEl.focus();
},
40: async ($) => {
$.preventDefault(), r(l).typeAheadDown(), r(w) && await T();
},
38: async ($) => {
$.preventDefault(), r(l).typeAheadUp(), r(w) && await T();
}
}), O = async (v) => {
if (v.key === "Enter" || v.key === "Tab") {
r(w) && await T();
return;
}
f(!0);
}, V = () => {
const v = r(l).$refs.dropdownMenu;
if (!v)
return;
const $ = r(l).$refs.toggle.getBoundingClientRect(), Q = Math.min(
window.innerHeight - $.bottom - 25,
window.innerHeight
);
v.style.maxHeight = `${Q}px`, v.style.width = `${$.width}px`, v.style.top = `${$.top + $.height + 1}px`, v.style.left = `${$.left}px`;
}, w = u(() => r(l)?.dropdownOpen), z = u(() => e.getOptionLabel || ((v) => {
if (typeof v == "object") {
const $ = e.optionLabel || e.label;
return Object.hasOwn(v, $) ? v[$] : (console.warn(
`[vue-select warn]: Label key "option.${$}" does not exist in options object ${JSON.stringify(v)}.
https://vue-select.org/api/html#getoptionlabel`
), "");
}
return v;
})), q = u(() => {
const v = {};
return v["input-id"] = e.id, v.getOptionLabel = r(z), v.label = e.optionLabel, { ...s, ...v };
}), I = u(() => e.fixMessageLine || !!e.warningMessage || !!e.errorMessage || !!e.descriptionMessage), K = u(() => e.errorMessage ? e.errorMessage : e.warningMessage ? e.warningMessage : e.descriptionMessage), A = u(() => `${e.id}-message`);
return se(w, async () => {
e.positionFixed && r(w) && (await he(), V());
}), De(() => {
d(), e.positionFixed && window.addEventListener("resize", V);
}), wt(() => {
e.positionFixed && window.removeEventListener("resize", V);
}), (v, $) => {
const E = J("oc-contextual-helper"), Q = J("oc-spinner"), h = J("oc-icon"), R = J("oc-button");
return n(), c("div", null, [
e.labelHidden ? y("", !0) : (n(), c("label", {
key: 0,
"aria-hidden": !0,
for: e.id,
class: "oc-label",
textContent: S(e.label)
}, null, 8, cl)),
e.contextualHelper?.isEnabled ? (n(), b(E, X({ key: 1 }, e.contextualHelper?.data, { class: "oc-pl-xs" }), null, 16)) : y("", !0),
L(r(ht), X({
ref_key: "select",
ref: l,
disabled: e.disabled || e.readOnly,
filter: e.filter,
loading: e.loading,
searchable: e.searchable,
clearable: e.clearable,
multiple: e.multiple,
class: ["oc-select", { "oc-select-position-fixed": e.positionFixed }],
style: { background: "transparent" },
"dropdown-should-open": C,
"map-keydown": g
}, q.value, {
"onUpdate:modelValue": $[1] || ($[1] = (B) => v.$emit("update:modelValue", B)),
onClick: $[2] || ($[2] = (B) => F()),
"onSearch:blur": $[3] || ($[3] = (B) => H()),
onKeydown: $[4] || ($[4] = (B) => O(B))
}), Kt({
search: k(({ attributes: B, events: D }) => [
p("input", X({ class: "vs__search" }, B, { onInput: o }, we(D, !0)), null, 16)
]),
"no-options": k(() => [
p("div", {
textContent: S(r(i)("No options available."))
}, null, 8, ul)
]),
spinner: k(({ loading: B }) => [
B ? (n(), b(Q, { key: 0 })) : y("", !0)
]),
"selected-option-container": k(({ option: B, deselect: D }) => [
p("span", {
class: M(["vs__selected", { "vs__selected-readonly": B.readonly }])
}, [
P(v.$slots, "selected-option", ee(ne(B)), () => [
e.readOnly ? (n(), b(h, {
key: 0,
name: "lock",
class: "oc-mr-xs",
size: "small"
})) : y("", !0),
ae(" " + S(z.value(B)), 1)
]),
e.multiple ? (n(), c("span", dl, [
B.readonly ? (n(), b(h, {
key: 0,
class: "vs__deselect-lock",
name: "lock",
size: "small"
})) : (n(), b(R, {
key: 1,
appearance: "raw",
title: r(i)("Deselect %{label}", { label: z.value(B) }),
"aria-label": r(i)("Deselect %{label}", { label: z.value(B) }),
class: "vs__deselect oc-mx-rm",
onMousedown: $[0] || ($[0] = re(() => {
}, ["stop", "prevent"])),
onClick: (oe) => D(B)
}, {
default: k(() => [
L(h, {
name: "close",
size: "small"
})
]),
_: 1
}, 8, ["title", "aria-label", "onClick"]))
])) : y("", !0)
], 2)
]),
_: 2
}, [
Z(v.$slots, (B, D) => ({
name: D,
fn: k((oe) => [
D !== "search" ? P(v.$slots, D, ee(X({ key: 0 }, oe))) : y("", !0)
])
}))
]), 1040, ["disabled", "filter", "loading", "searchable", "clearable", "multiple", "class"]),
I.value ? (n(), c("div", {
key: 2,
class: M(["oc-text-input-message", {
"oc-text-input-description": !!e.descriptionMessage,
"oc-text-input-warning": !!e.warningMessage,
"oc-text-input-danger": !!e.errorMessage
}])
}, [
K.value !== null && e.descriptionMessage ? (n(), b(h, {
key: 0,
name: "information",
size: "small",
"fill-type": "line"
})) : y("", !0),
p("span", {
id: A.value,
class: M({
"oc-text-input-description": !!e.descriptionMessage,
"oc-text-input-warning": !!e.warningMessage,
"oc-text-input-danger": !!e.errorMessage
}),
textContent: S(K.value)
}, null, 10, fl)
], 2)) : y("", !0)
]);
};
}
}), ml = { class: "oc-page-size" }, hl = ["for", "textContent"], gl = /* @__PURE__ */ x({
name: "OcPageSize",
status: "ready",
release: "8.0.0",
__name: "OcPageSize",
props: {
options: {},
label: {},
selected: {},
selectId: { default: () => _("oc-page-size-") }
},
emits: ["change"],
setup(e, { emit: t }) {
const a = t;
function i(l) {
a("change", l);
}
return (l, s) => (n(), c("div", ml, [
p("label", {
class: "oc-page-size-label",
for: e.selectId,
"data-testid": "oc-page-size-label",
"aria-hidden": !0,
textContent: S(e.label)
}, null, 8, hl),
L(At, {
"input-id": e.selectId,
class: "oc-page-size-select",
"data-testid": "oc-page-size-select",
"model-value": e.selected,
label: e.label,
"label-hidden": !0,
options: e.options,
clearable: !1,
searchable: !1,
"onUpdate:modelValue": i
}, null, 8, ["input-id", "model-value", "label", "options"])
]));
}
}), bl = ["aria-label"], pl = { class: "oc-pagination-list" }, yl = {
key: 0,
class: "oc-pagination-list-item"
}, vl = {
key: 1,
class: "oc-pagination-list-item"
}, wl = /* @__PURE__ */ x({
name: "OcPagination",
status: "ready",
release: "7.2.0",
__name: "OcPagination",
props: {
pages: {},
currentPage: {},
maxDisplayed: { default: null },
currentRoute: {}
},
setup(e) {
const { $gettext: t } = ie();
function a(g) {
return t("Go to page %{ page }", { page: g.toString() });
}
function i(g) {
return r(T) === g;
}
function l(g) {
return g === "..." || i(g) ? "span" : "router-link";
}
function s(g) {
if (g === "...")
return;
if (i(g))
return {
"aria-current": "page"
};
const O = o(g);
return {
"aria-label": a(g),
to: O
};
}
function d(g) {
const O = ["oc-pagination-list-item-page"];
return i(g) ? O.push("oc-pagination-list-item-current") : g === "..." ? O.push("oc-pagination-list-item-ellipsis") : O.push("oc-pagination-list-item-link"), O;
}
function o(g) {
return {
name: e.currentRoute.name,
query: { ...e.currentRoute.query, page: g },
params: e.currentRoute.params
};
}
const m = u(() => {
let g = [];
for (let O = 0; O < e.pages; O++)
g.push(O + 1);
if (e.maxDisplayed && e.maxDisplayed + 1 < e.pages) {
const O = r(T) - 1, V = Math.floor(e.maxDisplayed / 2);
return g = g.slice(
Math.max(0, O - V),
O + V + 1
), r(T) > 2 && (Number(g[0]) > 2 ? g.unshift(1, "...") : g.unshift(1)), r(T) < e.pages - 1 && (Number(g[g.length - 1]) < e.pages - 1 ? g.push("...", e.pages) : g.push(e.pages)), g;
}
return g;
}), f = u(() => r(T) > 1), C = u(() => r(T) < e.pages), F = u(() => o(r(T) - 1)), H = u(() => o(r(T) + 1)), T = u(() => Math.max(1, Math.min(e.currentPage, e.pages)));
return (g, O) => {
const V = J("router-link");
return n(), c("nav", {
class: "oc-pagination",
"aria-label": r(t)("Pagination")
}, [
p("ol", pl, [
f.value ? (n(), c("li", yl, [
L(V, {
class: "oc-pagination-list-item-prev",
"aria-label": r(t)("Go to the previous page"),
to: F.value
}, {
default: k(() => [
L(j, {
name: "arrow-drop-left",
"fill-type": "line"
})
]),
_: 1
}, 8, ["aria-label", "to"])
])) : y("", !0),
(n(!0), c(G, null, Z(m.value, (w, z) => (n(), c("li", {
key: z,
class: "oc-pagination-list-item"
}, [
(n(), b(le(l(w)), X({
class: d(w)
}, { ref_for: !0 }, s(w)), {
default: k(() => [
ae(S(w), 1)
]),
_: 2
}, 1040, ["class"]))
]))), 128)),
C.value ? (n(), c("li", vl, [
L(V, {
class: "oc-pagination-list-item-next",
"aria-label": r(t)("Go to the next page"),
to: H.value
}, {
default: k(() => [
L(j, {
name: "arrow-drop-right",
"fill-type": "line"
})
]),
_: 1
}, 8, ["aria-label", "to"])
])) : y("", !0)
])
], 8, bl);
};
}
}), xl = ["aria-valuemax", "aria-valuenow"], $l = {
key: 1,
class: "oc-progress-indeterminate"
}, Ol = /* @__PURE__ */ x({
name: "OcProgress",
status: "ready",
release: "1.0.0",
__name: "OcProgress",
props: {
value: { default: 0 },
max: { default: () => {
} },
size: { default: "default" },
variation: { default: "primary" },
indeterminate: { type: Boolean, default: !1 }
},
setup(e) {
const t = u(() => `oc-progress oc-progress-${e.size} oc-progress-${e.variation}`), a = u(() => e.max ? `${e.value / e.max * 100}%` : "-");
return (i, l) => (n(), c("div", {
class: M(t.value),
"aria-valuemax": e.max,
"aria-valuenow": e.value,
"aria-busy": "true",
"aria-valuemin": "0",
role: "progressbar"
}, [
e.indeterminate ? (n(), c("div", $l, [...l[0] || (l[0] = [
p("div", { class: "oc-progress-indeterminate-first" }, null, -1),
p("div", { class: "oc-progress-indeterminate-second" }, null, -1)
])])) : (n(), c("div", {
key: 0,
class: "oc-progress-current",
style: ue({ width: a.value })
}, null, 4))
], 10, xl));
}
}), kl = ["data-fill"], Cl = ["textContent"], Vt = /* @__PURE__ */ x({
name: "OcProgressPie",
status: "ready",
release: "1.0.0",
__name: "OcProgressPie",
props: {
progress: { default: 0 },
max: { default: 100 },
showLabel: { type: Boolean, default: !1 }
},
setup(e) {
const t = u(() => Math.round(100 / e.max * e.progress)), a = u(() => e.max === 100 ? e.progress + "%" : `${e.progress}/${e.max}`);
return (i, l) => (n(), c("div", {
class: "oc-progress-pie",
"data-fill": t.value
}, [
l[0] || (l[0] = p("div", { class: "oc-progress-pie-container" }, null, -1)),
e.showLabel ? (n(), c("label", {
key: 0,
class: "oc-progress-pie-label oc-text-muted",
textContent: S(a.value)
}, null, 8, Cl)) : y("", !0)
], 8, kl));
}
}), gt = {};
typeof gt == "function" && gt(Vt);
const Sl = ["id", "aria-checked", "value", "disabled"], Tl = ["for", "textContent"], Dl = /* @__PURE__ */ x({
name: "OcRadio",
status: "ready",
release: "1.0.0",
__name: "OcRadio",
props: {
id: { default: () => _("oc-radio-") },
disabled: { type: Boolean, default: !1 },
modelValue: { default: !1 },
option: { default: null },
label: { default: null },
hideLabel: { type: Boolean, default: !1 },
size: { default: "medium" }
},
emits: ["update:modelValue"],
setup(e, { emit: t }) {
const a = t, i = u({
get() {
return e.modelValue;
},
set(d) {
a("update:modelValue", d);
}
}), l = u(() => ["oc-radio", "oc-radio-" + te(e.size)]), s = u(() => ({
"oc-invisible-sr": e.hideLabel,
"oc-cursor-pointer": !e.disabled
}));
return (d, o) => (n(), c("span", null, [
Y(p("input", {
id: e.id,
"onUpdate:modelValue": o[0] || (o[0] = (m) => i.value = m),
type: "radio",
name: "radio",
class: M(l.value),
"aria-checked": e.option === e.modelValue,
value: e.option,
disabled: e.disabled
}, null, 10, Sl), [
[Wt, i.value]
]),
p("label", {
for: e.id,
class: M(s.value),
textContent: S(e.label)
}, null, 10, Tl)
]));
}
}), Ll = ["aria-label"], Oe = /* @__PURE__ */ x({
name: "OcSpinner",
status: "ready",
release: "1.0.0",
__name: "OcSpinner",
props: {
ariaLabel: { default: "" },
size: { default: "medium" }
},
setup(e) {
const t = u(() => ["oc-spinner", `oc-spinner-${te(e.size)}`]);
return (a, i) => (n(), c("span", {
class: M(t.value),
"aria-label": e.ariaLabel,
tabindex: "-1",
role: "img"
}, null, 10, Ll));
}
}), bt = {};
typeof bt == "function" && bt(Oe);
const Ml = { class: "oc-recipient" }, Bl = ["textContent"], Pl = /* @__PURE__ */ x({
name: "OcRecipient",
status: "ready",
release: "8.2.0",
__name: "OcRecipient",
props: {
recipient: {}
},
setup(e) {
return (t, a) => (n(), c("span", Ml, [
e.recipient.hasAvatar ? (n(), c(G, { key: 0 }, [
e.recipient.isLoadingAvatar ? (n(), b(Oe, {
key: "recipient-avatar-spinner",
size: "small",
"aria-label": t.$gettext("Loading avatar"),
"data-testid": "recipient-avatar-spinner"
}, null, 8, ["aria-label"])) : (n(), b($e, {
key: e.recipient.avatar || e.recipient.name,
"data-testid": "recipient-avatar",
class: "oc-recipient-avatar",
src: e.recipient.avatar,
"user-name": e.recipient.name,
width: 16.8
}, null, 8, ["src", "user-name"]))
], 64)) : e.recipient.icon && e.recipient.icon.name ? (n(), b(j, {
key: 1,
class: "oc-recipient-icon",
size: "small",
name: e.recipient.icon.name,
"accessible-label": e.recipient.icon.label,
"data-testid": "recipient-icon"
}, null, 8, ["name", "accessible-label"])) : y("", !0),
p("p", {
class: "oc-recipient-name",
"data-testid": "recipient-name",
textContent: S(e.recipient.name)
}, null, 8, Bl),
P(t.$slots, "append")
]));
}
}), Il = { class: "oc-width-expand oc-position-relative" }, Al = ["aria-label", "value", "disabled", "placeholder"], Vl = ["textContent"], zl = /* @__PURE__ */ x({
name: "OcSearchBar",
status: "ready",
release: "1.0.0",
__name: "OcSearchBar",
props: {
value: { default: null },
icon: { default: "search" },
placeholder: { default: "" },
label: { default: "" },
small: { type: Boolean, default: !1 },
buttonLabel: { default: "Search" },
buttonHidden: { type: Boolean, default: !1 },
typeAhead: { type: Boolean, default: !1 },
trimQuery: { type: Boolean, default: !0 },
loading: { type: Boolean, default: !1 },
isFilter: { type: Boolean, default: !1 },
loadingAccessibleLabel: { default: "" },
showCancelButton: { type: Boolean, default: !1 },
cancelButtonVariation: { default: "primary" },
cancelButtonAppearance: { default: "raw" },
cancelHandler: { type: Function, default: () => {
} }
},
emits: ["advancedSearch", "clear", "input", "keyup", "search"],
setup(e, { emit: t }) {
Gt((g) => ({
v4af58a24: f.value
}));
const a = t, i = Ut(), l = W(""), { $gettext: s } = ie();
function d() {
a("search", r(l));
}
function o(g) {
l.value = e.trimQuery ? g.trim() : g, a("input", r(l)), e.typeAhead && d();
}
function m() {
l.value = "", o(""), d(), e.cancelHandler();
}
se(
() => e.value,
() => {
e.value || (l.value = "");
}
);
const f = u(() => i.locationFilter?.().length > 0 ? "125px" : "48px"), C = u(() => e.value === null ? r(l) : e.value), F = u(() => e.small ? "xsmall" : "medium"), H = u(() => {
const g = ["oc-search-input", "oc-input"];
return !e.buttonHidden && g.push("oc-search-input-button"), g;
}), T = u(() => e.loadingAccessibleLabel || s("Loading results"));
return (g, O) => {
const V = ce("oc-tooltip");
return n(), b(Mt, {
flex: "",
role: e.isFilter ? void 0 : "search",
class: M(["oc-search oc-flex-middle", { "oc-search-small": e.small }])
}, {
default: k(() => [
p("div", Il, [
p("input", {
ref: "searchInput",
class: M(H.value),
"aria-label": e.label,
value: C.value,
disabled: e.loading,
placeholder: e.placeholder,
onInput: O[0] || (O[0] = (w) => o(w.target.value)),
onKeydown: xe(d, ["enter"]),
onKeyup: O[1] || (O[1] = (w) => g.$emit("keyup", w))
}, null, 42, Al),
P(g.$slots, "locationFilter"),
e.icon ? Y((n(), b(U, {
key: 0,
"aria-label": r(s)("Search"),
class: "oc-position-small oc-position-center-right oc-mt-rm",
appearance: "raw",
onClick: O[2] || (O[2] = re((w) => g.$emit("advancedSearch", w), ["prevent", "stop"]))
}, {
default: k(() => [
Y(L(j, {
name: e.icon,
size: "small",
"fill-type": "line",
variation: "passive"
}, null, 8, ["name"]), [
[ye, !e.loading]
]),
Y(L(Oe, {
size: F.value,
"aria-label": T.value
}, null, 8, ["size", "aria-label"]), [
[ye, e.loading]
])
]),
_: 1
}, 8, ["aria-label"])), [
[V, r(s)("Search")]
]) : y("", !0)
]),
p("div", {
class: M(["oc-search-button-wrapper", { "oc-invisible-sr": e.buttonHidden }])
}, [
L(U, {
class: "oc-search-button",
variation: "primary",
appearance: "filled",
size: e.small ? "small" : "medium",
disabled: e.loading || C.value.length < 1,
onClick: d
}, {
default: k(() => [
ae(S(e.buttonLabel), 1)
]),
_: 1
}, 8, ["size", "disabled"])
], 2),
e.showCancelButton ? (n(), b(U, {
key: 0,
variation: e.cancelButtonVariation,
appearance: e.cancelButtonAppearance,
class: "oc-ml-m",
onClick: m
}, {
default: k(() => [
p("span", {
textContent: S(r(s)("Cancel"))
}, null, 8, Vl)
]),
_: 1
}, 8, ["variation", "appearance"])) : y("", !0)
]),
_: 3
}, 8, ["role", "class"]);
};
}
}), El = { class: "oc-status-indicators" }, Fl = ["id", "textContent"], zt = /* @__PURE__ */ x({
name: "OcStatusIndicators",
status: "ready",
release: "2.0.1",
__name: "OcStatusIndicators",
props: {
resource: {},
indicators: {},
disableHandler: { type: Boolean, default: !1 }
},
setup(e) {
const t = W({}), a = (l) => Object.prototype.hasOwnProperty.call(l, "handler"), i = (l) => l.accessibleDescription ? (r(t)[l.id] || (r(t)[l.id] = _("oc-indicator-description-")), r(t)[l.id]) : null;
return (l, s) => {
const d = ce("oc-tooltip");
return n(), c("div", El, [
(n(!0), c(G, null, Z(e.indicators, (o) => (n(), c(G, null, [
a(o) && !e.disableHandler ? Y((n(), b(U, {
id: o.id,
key: `${o.id}-handler`,
class: "oc-status-indicators-indicator oc-ml-xs",
"aria-label": l.$gettext(o.label),
"aria-describedby": i(o),
appearance: "raw",
"data-testid": o.id,
"data-test-indicator-type": o.type,
onClick: (m) => o.handler(e.resource)
}, {
default: k(() => [
L(j, {
name: o.icon,
size: "small",
"fill-type": o.fillType,
variation: "inherit"
}, null, 8, ["name", "fill-type"])
]),
_: 2
}, 1032, ["id", "aria-label", "aria-describedby", "data-testid", "data-test-indicator-type", "onClick"])), [
[d, l.$gettext(o.label)]
]) : Y((n(), b(j, {
id: o.id,
key: o.id,
tabindex: "-1",
size: "small",
class: "oc-status-indicators-indicator oc-ml-xs",
name: o.icon,
"fill-type": o.fillType,
"accessible-label": l.$gettext(o.label),
"aria-describedby": i(o),
"data-testid": o.id,
"data-test-indicator-type": o.type
}, null, 8, ["id", "name", "fill-type", "accessible-label", "aria-describedby", "data-testid", "data-test-indicator-type"])), [
[d, l.$gettext(o.label)]
]),
i(o) ? (n(), c("p", {
id: i(o),
key: i(o),
class: "oc-invisible-sr",
textContent: S(l.$gettext(o.accessibleDescription))
}, null, 8, Fl)) : y("", !0)
], 64))), 256))
]);
};
}
}), pt = {};
typeof pt == "function" && pt(zt);
const Hl = ["id", "textContent"], Rl = ["aria-checked", "aria-labelledby"], Nl = /* @__PURE__ */ x({
name: "OcSwitch",
status: "ready",
release: "1.0.0",
__name: "OcSwitch",
props: {
checked: { type: Boolean, default: !1 },
label: { default: null },
labelId: { default: () => _("oc-switch-label-") }
},
emits: ["update:checked"],
setup(e, { emit: t }) {
const a = t;
function i() {
a("update:checked", !e.checked);
}
return (l, s) => (n(), c("span", {
key: `oc-switch-${e.checked.toString()}`,
class: "oc-switch"
}, [
p("span", {
id: e.labelId,
textContent: S(e.label)
}, null, 8, Hl),
p("button", {
"data-testid": "oc-switch-btn",
class: "oc-switch-btn",
role: "switch",
"aria-checked": e.checked,
"aria-labelledby": e.labelId,
onClick: i
}, null, 8, Rl)
]));
}
}), jl = { class: "oc-thead" }, Et = /* @__PURE__ */ x({
name: "OcThead",
status: "ready",
release: "2.1.0",
__name: "OcTableHeader",
setup(e) {
return (t, a) => (n(), c("thead", jl, [
P(t.$slots, "default")
]));
}
}), Ft = /* @__PURE__ */ x({
name: "OcTbody",
status: "ready",
release: "2.1.0",
__name: "OcTableBody",
setup(e) {
return (t, a) => (n(), c("tbody", null, [
P(t.$slots, "default")
]));
}
}), Fe = /* @__PURE__ */ x({
name: "OcTableCell",
status: "ready",
release: "2.1.0",
__name: "OcTableCell",
props: {
type: { default: "td" },
alignH: { default: "left" },
alignV: { default: "middle" },
width: { default: "auto" },
wrap: { default: null }
},
emits: ["click"],
setup(e, { emit: t }) {
const a = t, i = u(() => {
const l = [
"oc-table-cell",
`oc-table-cell-align-${e.alignH}`,
`oc-table-cell-align-${e.alignV}`,
`oc-table-cell-width-${e.width}`
];
return e.wrap && l.push(`oc-text-${e.wrap}`), l;
});
return (l, s) => (n(), b(le(e.type), {
class: M(i.value),
onClick: s[0] || (s[0] = (d) => a("click", d))
}, {
default: k(() => [
P(l.$slots, "default")
]),
_: 3
}, 8, ["class"]));
}
}), He = /* @__PURE__ */ x({
name: "OcTd",
status: "ready",
release: "2.1.0",
__name: "OcTableCellData",
props: {
alignH: { default: "left" },
alignV: { default: "middle" },
width: { default: "auto" },
wrap: { default: null }
},
setup(e) {
return (t, a) => (n(), b(Fe, {
type: "td",
"align-h": e.alignH,
"align-v": e.alignV,
width: e.width,
wrap: e.wrap,
class: "oc-td"
}, {
default: k(() => [
P(t.$slots, "default")
]),
_: 3
}, 8, ["align-h", "align-v", "width", "wrap"]));
}
}), Se = /* @__PURE__ */ x({
name: "OcTr",
status: "ready",
release: "1.0.0",
__name: "OcTableRow",
props: {
lazy: { default: null }
},
emits: ["contextmenu", "click", "dragstart", "drop", "dragenter", "dragleave", "dragover", "mouseleave", "itemVisible"],
setup(e, { emit: t }) {
const a = t, i = qt((o, m) => {
let f;
return {
get() {
return o(), f;
},
set(C) {
f = C, m();
}
};
}), l = u(() => e.lazy ? e.lazy.colspan : 1), { isVisible: s } = e.lazy ? ca({
...e.lazy,
target: i,
onVisibleCallback: () => a("itemVisible")
}) : { isVisible: W(!0) }, d = u(() => !r(s));
return e.lazy || a("itemVisible"), (o, m) => (n(), c("tr", {
ref_key: "observerTarget",
ref: i,
onClick: m[0] || (m[0] = (f) => o.$emit("click", f)),
onContextmenu: m[1] || (m[1] = (f) => o.$emit("contextmenu", f)),
onDragstart: m[2] || (m[2] = (f) => o.$emit("dragstart", f)),
onDrop: m[3] || (m[3] = (f) => o.$emit("drop", f)),
onDragenter: m[4] || (m[4] = (f) => o.$emit("dragenter", f)),
onDragleave: m[5] || (m[5] = (f) => o.$emit("dragleave", f)),
onDragover: m[6] || (m[6] = (f) => o.$emit("dragover", f)),
onMouseleave: m[7] || (m[7] = (f) => o.$emit("mouseleave", f))
}, [
d.value ? (n(), b(He, {
key: 0,
colspan: l.value
}, {
default: k(() => [...m[8] || (m[8] = [
p("span", { class: "shimmer" }, null, -1)
])]),
_: 1
}, 8, ["colspan"])) : P(o.$slots, "default", { key: 1 })
], 544));
}
}), Ht = /* @__PURE__ */ x({
name: "OcTh",
status: "ready",
release: "2.1.0",
__name: "OcTableCellHead",
props: {
alignH: { default: "left" },
alignV: { default: "middle" },
width: { default: "auto" },
wrap: { default: "nowrap" }
},
emits: ["click"],
setup(e, { emit: t }) {
const a = t;
return (i, l) => (n(), b(Fe, {
type: "th",
"align-h": e.alignH,
"align-v": e.alignV,
width: e.width,
wrap: e.wrap,
class: "oc-th",
onClick: l[0] || (l[0] = (s) => a("click", s))
}, {
default: k(() => [
P(i.$slots, "default")
]),
_: 3
}, 8, ["align-h", "align-v", "width", "wrap"]));
}
}), Kl = {
key: 0,
class: "oc-table-thead-content"
}, Wl = ["textContent"], Gl = { key: 1 }, Ul = {
key: 0,
class: "oc-table-thead-content"
}, ql = ["textContent"], Xl = {
key: 1,
class: "oc-table-footer"
}, Jl = { class: "oc-table-footer-row" }, Ql = ["colspan"], yt = "asc", Ce = "desc", Yl = /* @__PURE__ */ x({
name: "OcTable",
status: "ready",
release: "2.1.0",
__name: "OcTable",
props: {
data: {},
idKey: { default: "id" },
itemDomSelector: { type: Function },
fields: {},
hasHeader: { type: Boolean, default: !0 },
sticky: { type: Boolean, default: !1 },
hover: { type: Boolean, default: !1 },
highlighted: { default: null },
disabled: { default: () => [] },
headerPosition: { default: 0 },
paddingX: { default: "small" },
dragDrop: { type: Boolean, default: !1 },
selection: {},
lazy: { type: Boolean, default: !1 },
sortDir: { default: () => {
} },
sortBy: { default: () => {
} }
},
emits: ["itemDropped", "itemDragged", "rowMounted", "theadClicked", "highlight", "contextmenuClicked", "itemVisible", "sort", "dropRowStyling"],
setup(e, { emit: t }) {
const a = t, { $gettext: i } = ie(), l = (h) => e.itemDomSelector ? e.itemDomSelector(h) : h[e.idKey], s = {
EVENT_TROW_CLICKED: ea,
EVENT_TROW_MOUNTED: Zt,
EVENT_TROW_CONTEXTMENU: _t
};
function d(h) {
h.preventDefault();
}
function o(h, R) {
a(ta, h, R);
}
function m(h, R) {
a(aa, h, R);
}
function f(h, R, B) {
a("dropRowStyling", h, R, B);
}
function C(h) {
return h.type === "slot";
}
function F(h) {
return ["callback", "function"].indexOf(h.type) >= 0;
}
function H(h) {
return Object.prototype.hasOwnProperty.call(h, "title") ? h.title : h.name;
}
function T() {
return {
class: E.value
};
}
function g(h, R) {
const B = w(h);
return B.class = `oc-table-header-cell oc-table-header-cell-${h.name}`, Object.prototype.hasOwnProperty.call(h, "thClass") && (B.class += ` ${h.thClass}`), e.sticky && (B.style = `top: ${e.headerPosition}px;`), R === 0 && (B.class += ` oc-pl-${te(e.paddingX)} `), R === e.fields.length - 1 && (B.class += ` oc-pr-${te(e.paddingX)}`), A(B, h), B;
}
function O(h, R) {
return {
...e.lazy && { lazy: { colspan: Q.value } },
class: [
"oc-tbody-tr",
`oc-tbody-tr-${l(h) || R}`,
z(h) ? "oc-table-highlighted" : void 0,
q(h) ? "oc-table-disabled" : void 0
].filter(Boolean)
};
}
function V(h, R, B) {
const D = w(h);
return D.class = `oc-table-data-cell oc-table-data-cell-${h.name}`, Object.prototype.hasOwnProperty.call(h, "tdClass") && (D.class += ` ${h.tdClass}`), Object.prototype.hasOwnProperty.call(h, "wrap") && (D.wrap = h.wrap), R === 0 && (D.class += ` oc-pl-${te(e.paddingX)} `), R === e.fields.length - 1 && (D.class += ` oc-pr-${te(e.paddingX)}`), Object.prototype.hasOwnProperty.call(h, "accessibleLabelCallback") && (D["aria-label"] = h.accessibleLabelCallback(B)), D;
}
function w(h) {
return {
...h?.alignH && { alignH: h.alignH },
...h?.alignV && { alignV: h.alignV },
...h?.width && { width: h.width },
class: void 0,
wrap: void 0,
style: void 0
};
}
function z(h) {
return e.highlighted ? Array.isArray(e.highlighted) ? e.highlighted.indexOf(h[e.idKey]) > -1 : e.highlighted === h[e.idKey] : !1;
}
function q(h) {
return e.disabled.length ? e.disabled.indexOf(h[e.idKey]) > -1 : !1;
}
function I(h, R, B) {
const D = [B[e.idKey], R + 1].filter(Boolean);
return C(h) ? [...D, h.name].join("-") : F(h) ? [...D, h.callback(B[h.name])].join("-") : [...D, B[h.name]].join("-");
}
function K(h) {
return i("Sort by %{ name }", { name: h });
}
function A(h, R) {
if (!v(R))
return;
let B = "none";
e.sortBy === R.name && (B = e.sortDir === yt ? "ascending" : "descending"), h["aria-sort"] = B;
}
function v({ sortable: h }) {
return !!h;
}
function $(h) {
if (!v(h))
return;
let R = e.sortDir;
e.sortBy === h.name && e.sortDir !== void 0 && (R = e.sortDir === Ce ? yt : Ce), (e.sortBy !== h.name || e.sortDir === void 0) && (R = h.sortDir || Ce), a("sort", {
sortBy: h.name,
sortDir: R
});
}
const E = u(() => {
const h = ["oc-table"];
return e.hover && h.push("oc-table-hover"), e.sticky && h.push("oc-table-sticky"), h;
}), Q = u(() => e.fields.length);
return (h, R) => {
const B = J("oc-icon");
return n(), c("table", X(T(), { class: "has-item-context-menu" }), [
e.hasHeader ? (n(), b(Et, { key: 0 }, {
default: k(() => [
L(Se, { class: "oc-table-header-row" }, {
default: k(() => [
(n(!0), c(G, null, Z(e.fields, (D, oe) => (n(), b(Ht, X({
key: `oc-thead-${D.name}`
}, { ref_for: !0 }, g(D, oe)), {
default: k(() => [
D.sortable ? (n(), b(U, {
key: 0,
"aria-label": K(D.name),
appearance: "raw",
class: "oc-button-sort oc-width-1-1",
onClick: (N) => $(D)
}, {
default: k(() => [
D.headerType === "slot" ? (n(), c("span", Kl, [
P(h.$slots, D.name + "Header")
])) : (n(), c("span", {
key: 1,
class: "oc-table-thead-content header-text",
textContent: S(H(D))
}, null, 8, Wl)),
L(B, {
name: e.sortDir === "asc" ? "arrow-down" : "arrow-up",
"fill-type": "line",
class: M({ "oc-invisible-sr": e.sortBy !== D.name }),
size: "small",
variation: "passive"
}, null, 8, ["name", "class"])
]),
_: 2
}, 1032, ["aria-label", "onClick"])) : (n(), c("div", Gl, [
D.headerType === "slot" ? (n(), c("span", Ul, [
P(h.$slots, D.name + "Header")
])) : (n(), c("span", {
key: 1,
class: "oc-table-thead-content header-text",
textContent: S(H(D))
}, null, 8, ql))
]))
]),
_: 2
}, 1040))), 128))
]),
_: 3
})
]),
_: 3
})) : y("", !0),
L(Ft, { class: "has-item-context-menu" }, {
default: k(() => [
(n(!0), c(G, null, Z(e.data, (D, oe) => (n(), b(Se, X({
key: `oc-tbody-tr-${l(D) || oe}`,
ref_for: !0,
ref: `row-${oe}`
}, { ref_for: !0 }, O(D, oe), {
"data-item-id": D[e.idKey],
draggable: e.dragDrop,
onClick: (N) => h.$emit(s.EVENT_TROW_CLICKED, [D, N]),
onContextmenu: (N) => h.$emit(
s.EVENT_TROW_CONTEXTMENU,
h.$refs[`row-${oe}`][0],
N,
D
),
onVnodeMounted: (N) => h.$emit(s.EVENT_TROW_MOUNTED, D, h.$refs[`row-${oe}`][0]),
onDragstart: (N) => o(D, N),
onDrop: (N) => m(l(D), N),
onDragenter: re((N) => f(l(D), !1, N), ["prevent"]),
onDragleave: re((N) => f(l(D), !0, N), ["prevent"]),
onMouseleave: (N) => f(l(D), !0, N),
onDragover: R[0] || (R[0] = (N) => d(N)),
onItemVisible: (N) => h.$emit("itemVisible", D)
}), {
default: k(() => [
(n(!0), c(G, null, Z(e.fields, (N, Re) => (n(), b(He, X({
key: "oc-tbody-td-" + I(N, Re, D)
}, { ref_for: !0 }, V(N, Re, D)), {
default: k(() => [
C(N) ? P(h.$slots, N.name, {
key: 0,
item: D
}) : F(N) ? (n(), c(G, { key: 1 }, [
ae(S(N.callback(D[N.name])), 1)
], 64)) : (n(), c(G, { key: 2 }, [
ae(S(D[N.name]), 1)
], 64))
]),
_: 2
}, 1040))), 128))
]),
_: 2
}, 1040, ["data-item-id", "draggable", "onClick", "onContextmenu", "onVnodeMounted", "onDragstart", "onDrop", "onDragenter", "onDragleave", "onMouseleave", "onItemVisible"]))), 128))
]),
_: 3
}),
h.$slots.footer ? (n(), c("tfoot", Xl, [
p("tr", Jl, [
p("td", {
colspan: Q.value,
class: "oc-table-footer-cell"
}, [
P(h.$slots, "footer")
], 8, Ql)
])
])) : y("", !0)
], 16);
};
}
}), Zl = /* @__PURE__ */ x({
name: "OcTfoot",
status: "ready",
release: "2.1.0",
__name: "OcTableFooter",
setup(e) {
return (t, a) => (n(), c("tfoot", null, [
P(t.$slots, "default")
]));
}
}), _l = /* @__PURE__ */ x({
name: "OcTableSimple",
status: "ready",
release: "2.1.0",
__name: "OcTableSimple",
props: {
hover: { type: Boolean, default: !1 }
},
setup(e) {
const t = u(() => {
const a = ["oc-table-simple"];
return e.hover && a.push("oc-table-simple-hover"), a;
});
return (a, i) => (n(), c("table", {
class: M(t.value)
}, [
P(a.$slots, "default")
], 2));
}
}), Rt = /* @__PURE__ */ x({
name: "OcTag",
status: "ready",
release: "2.0.0",
__name: "OcTag",
props: {
type: { default: "span" },
to: { default: null },
size: { default: "medium" },
rounded: { type: Boolean, default: !1 }
},
emits: ["click"],
setup(e, { emit: t }) {
const a = t;
function i(s) {
a("click", s);
}
const l = u(() => {
const s = ["oc-tag", `oc-tag-${te(e.size)}`];
return e.type === "router-link" || e.type === "a" ? s.push("oc-tag-link") : s.push(`oc-tag-${e.type}`), e.rounded && s.push("oc-tag-rounded"), s;
});
return (s, d) => (n(), b(le(e.type), {
class: M(l.value),
to: e.to,
onClick: i
}, {
default: k(() => [
P(s.$slots, "default")
]),
_: 3
}, 8, ["class", "to"]));
}
}), vt = {};
typeof vt == "function" && vt(Rt);
const eo = ["for", "textContent"], to = ["id", "value", "aria-invalid"], ao = {
key: 0,
class: "oc-textarea-message"
}, no = ["id", "textContent"], lo = /* @__PURE__ */ x({
name: "OcTextarea",
status: "ready",
release: "1.0.0",
__name: "OcTextarea",
props: {
id: { default: () => _("oc-textarea-") },
modelValue: { default: null },
label: { default: null },
warningMessage: { default: null },
errorMessage: { default: null },
descriptionMessage: { default: null },
fixMessageLine: { type: Boolean, default: !1 },
submitOnEnter: { type: Boolean, default: !0 }
},
emits: ["update:modelValue", "focus", "change", "keydown"],
setup(e, { expose: t, emit: a }) {
const i = a, l = me(), s = Te("textAreaRef");
function d() {
s.value.focus();
}
function o(O) {
i("update:modelValue", O);
}
function m(O) {
i("focus", O);
}
function f(O) {
const V = O.key?.toLowerCase() === "enter";
e.submitOnEnter && V && !O.ctrlKey && !O.shiftKey && i("change", O.target.value), i("keydown", O);
}
const C = u(() => e.fixMessageLine || !!e.warningMessage || !!e.errorMessage || !!e.descriptionMessage), F = u(() => `${e.id}-message`), H = u(() => {
const O = {};
return (e.warningMessage || e.errorMessage || e.descriptionMessage) && (O["aria-describedby"] = F), { ...l, ...O };
}), T = u(() => (!!e.errorMessage).toString()), g = u(() => e.errorMessage ? e.errorMessage : e.warningMessage ? e.warningMessage : e.descriptionMessage);
return t({
focus: d
}), (O, V) => (n(), c("div", null, [
p("label", {
class: "oc-label",
for: e.id,
textContent: S(e.label)
}, null, 8, eo),
p("textarea", X({ id: e.id }, H.value, {
ref_key: "textAreaRef",
ref: s,
class: ["oc-textarea oc-rounded", {
"oc-textarea-warning": !!e.warningMessage,
"oc-textarea-danger": !!e.errorMessage
}],
value: e.modelValue,
"aria-invalid": T.value,
onInput: V[0] || (V[0] = (w) => o(w.target.value)),
onFocus: V[1] || (V[1] = (w) => m(!0)),
onKeydown: V[2] || (V[2] = (w) => f(w))
}), null, 16, to),
C.value ? (n(), c("div", ao, [
p("span", {
id: F.value,
class: M({
"oc-textarea-description": !!e.descriptionMessage,
"oc-textarea-warning": !!e.warningMessage,
"oc-textarea-danger": !!e.errorMessage
}),
textContent: S(g.value)
}, null, 10, no)
])) : y("", !0)
]));
}
}), oo = {
key: 0,
class: "oc-flex oc-flex-center"
}, so = /* @__PURE__ */ x({
name: "OcEmojiPicker",
status: "ready",
release: "1.0.0",
__name: "OcEmojiPicker",
props: {
theme: { default: "light" }
},
emits: ["emojiSelect", "clickOutside"],
setup(e, { emit: t }) {
const a = t, i = ie(), { $gettext: l } = i, s = W(), d = W(!0);
return se(
[() => e.theme, () => i.current],
async () => {
d.value = !0, await he();
const o = {
search: l("Search"),
search_no_results_1: l("Oh no!"),
search_no_results_2: l("That emoji couldn’t be found"),
pick: l("Pick an emoji…"),
add_custom: l("Add custom emoji"),
categories: {
activity: l("Activity"),
custom: l("Custom"),
flags: l("Flags"),
foods: l("Food & Drink"),
frequent: l("Frequently used"),
nature: l("Animals & Nature"),
objects: l("Objects"),
people: l("Smileys & People"),
places: l("Travel & Places"),
search: l("Search Results"),
symbols: l("Symbols")
},
skins: {
choose: l("Choose default skin tone"),
1: l("Default"),
2: l("Light"),
3: l("Medium-Light"),
4: l("Medium"),
5: l("Medium-Dark"),
6: l("Dark")
}
}, m = (await import("@emoji-mart/data")).default, f = {
onEmojiSelect: (H) => a("emojiSelect", H.native),
onClickOutside: () => a("clickOutside"),
i18n: o,
data: m,
autoFocus: !0,
theme: e.theme
}, { Picker: C } = await import("emoji-mart"), F = new C(f);
d.value = !1, await he(), r(s).innerHTML = "", r(s).appendChild(F);
},
{ immediate: !0 }
), (o, m) => {
const f = J("oc-spinner");
return d.value ? (n(), c("div", oo, [
L(f, { size: "large" })
])) : (n(), c("div", {
key: 1,
ref_key: "emojiPickerRef",
ref: s
}, null, 512));
};
}
}), io = /* @__PURE__ */ x({
name: "OcRemoteIcon",
__name: "OcRemoteIcon",
props: {
src: {},
size: { default: "medium" },
variation: { default: "passive" }
},
setup(e) {
const t = u(() => ({
"--oc-remote-icon-src": `url(${e.src})`
}));
return (a, i) => (n(), c("span", {
class: M(["oc-remote-icon", r(te)(e.size), e.variation]),
style: ue(t.value)
}, null, 6));
}
}), ro = (e, t) => {
const a = e.__vccOpts || e;
for (const [i, l] of t)
a[i] = l;
return a;
}, co = /* @__PURE__ */ ro(io, [["__scopeId", "data-v-b746eda3"]]), uo = ["srcset"], fo = ["srcset"], mo = ["srcset"], ho = ["srcset"], go = ["srcset"], bo = ["src", "alt", "loading"], po = /* @__PURE__ */ x({
name: "OcResponsiveImage",
__name: "OcResponsiveImage",
props: {
src: {},
alt: {},
loading: { default: "lazy" }
},
setup(e) {
const t = u(() => e.src.xl || e.src.lg || e.src.md || e.src.sm || e.src.xs || "");
return (a, i) => (n(), c("picture", null, [
e.src.xl ? (n(), c("source", {
key: "responsive-image-xl",
media: "(min-width: 1600px)",
srcset: e.src.xl
}, null, 8, uo)) : y("", !0),
e.src.lg ? (n(), c("source", {
key: "responsive-image-lg",
media: "(min-width: 1200px)",
srcset: e.src.lg
}, null, 8, fo)) : y("", !0),
e.src.md ? (n(), c("source", {
key: "responsive-image-md",
media: "(min-width: 960px)",
srcset: e.src.md
}, null, 8, mo)) : y("", !0),
e.src.sm ? (n(), c("source", {
key: "responsive-image-sm",
media: "(min-width: 640px)",
srcset: e.src.sm
}, null, 8, ho)) : y("", !0),
e.src.xs ? (n(), c("source", {
key: "responsive-image-xs",
srcset: e.src.xs
}, null, 8, go)) : y("", !0),
p("img", {
src: t.value,
alt: e.alt,
loading: e.loading
}, null, 8, bo)
]));
}
}), Bo = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
OcApplicationIcon: Ot,
OcAvatar: $e,
OcAvatarCount: Me,
OcAvatarFederated: Be,
OcAvatarGroup: Pe,
OcAvatarGuest: Ie,
OcAvatarItem: ge,
OcAvatarLink: Ae,
OcAvatars: kt,
OcBreadcrumb: St,
OcButton: U,
OcCheckbox: Tt,
OcContextualHelper: Va,
OcDatepicker: Dt,
OcDefinitionList: Ea,
OcDrop: pe,
OcDropzone: Lt,
OcEmojiPicker: so,
OcErrorLog: It,
OcFilterChip: Na,
OcGrid: Mt,
OcHiddenAnnouncer: Ka,
OcIcon: j,
OcImage: Le,
OcInfoDrop: Ve,
OcList: Wa,
OcLoader: Bt,
OcLogo: Pt,
OcModal: un,
OcNotificationMessage: On,
OcNotifications: kn,
OcPageSize: gl,
OcPagination: wl,
OcProgress: Ol,
OcProgressPie: Vt,
OcRadio: Dl,
OcRecipient: Pl,
OcRemoteIcon: co,
OcResponsiveImage: po,
OcSearchBar: zl,
OcSelect: At,
OcSpinner: Oe,
OcStatusIndicators: zt,
OcSwitch: Nl,
OcTable: Yl,
OcTableBody: Ft,
OcTableCell: Fe,
OcTableCellData: He,
OcTableCellHead: Ht,
OcTableFooter: Zl,
OcTableHeader: Et,
OcTableRow: Se,
OcTableSimple: _l,
OcTag: Rt,
OcTextInput: ze,
OcTextarea: lo
}, Symbol.toStringTag, { value: "Module" }));
export {
ze as $,
un as A,
On as B,
kn as C,
gl as D,
wl as E,
Ol as F,
Vt as G,
Dl as H,
Pl as I,
zl as J,
At as K,
Oe as L,
zt as M,
Nl as N,
Mo as O,
Yl as P,
Fe as Q,
Ft as R,
He as S,
Zl as T,
Ht as U,
Et as V,
Se as W,
_l as X,
Rt as Y,
lo as Z,
Ot as _,
$e as a,
It as a0,
so as a1,
co as a2,
po as a3,
Me as b,
Bo as c,
Be as d,
Pe as e,
Ie as f,
ge as g,
Ae as h,
kt as i,
St as j,
U as k,
Tt as l,
Va as m,
Dt as n,
Ea as o,
pe as p,
Lt as q,
Na as r,
Mt as s,
Ka as t,
j as u,
Le as v,
Ve as w,
Wa as x,
Bt as y,
Pt as z
};