@opencloud-eu/design-system
Version:
OpenCloud Design System is used to design OpenCloud UI components
1,480 lines • 141 kB
JavaScript
import { defineComponent as B, computed as p, createBlock as $, openBlock as l, resolveDynamicComponent as se, normalizeClass as A, withCtx as T, createVNode as P, unref as d, normalizeStyle as ce, createElementBlock as u, ref as K, toDisplayString as O, createElementVNode as v, createCommentVNode as w, useTemplateRef as ue, onMounted as be, resolveDirective as he, withDirectives as Q, renderSlot as F, Fragment as W, renderList as _, resolveComponent as Y, mergeProps as X, toHandlers as ke, onBeforeUnmount as Te, watch as ee, withModifiers as de, nextTick as pe, mergeModels as me, useModel as Ce, withKeys as ve, vModelCheckbox as dt, useAttrs as ye, createTextVNode as J, vModelDynamic as ut, normalizeProps as te, guardReactiveProps as le, vShow as we, Transition as pt, createSlots as ft, vModelRadio as mt, useCssVars as ht, useSlots as gt, vModelText as qe, customRef as bt } from "vue";
import { u as Z, g as yt, a as ae, b as vt, c as wt, r as $t, d as kt, h as Ve, E as Ct, e as Ot, f as St, i as Mt, j as Tt, k as Dt } from "./uniqueId-Dt-4z8v4.js";
import Pe from "vue-inline-svg";
import { useGettext as ne } from "vue3-gettext";
import { kebabCase as Ae, isEqual as Bt, debounce as Lt } from "lodash-es";
import Ke, { hideAll as xt } from "tippy.js";
import { detectOverflow as Vt } from "@popperjs/core";
import Pt from "deepmerge";
import { FocusTrap as Oe } from "focus-trap-vue";
import { DateTime as ze } from "luxon";
import { PortalTarget as At } from "portal-vue";
import zt from "fuse.js";
import { u as It } from "./index-B-hUyoop.js";
const q = /* @__PURE__ */ B({
__name: "OcIcon",
props: {
accessibleLabel: { default: "" },
color: { default: "" },
fillType: { default: "fill" },
name: { default: "info" },
size: { default: "medium" },
type: { default: "span" }
},
emits: ["loaded"],
setup(e, { emit: t }) {
Pe.name = "inline-svg";
const a = t, n = p(() => Z("oc-icon-title-")), s = p(() => {
const r = `${yt()}icons/`, i = e.fillType.toLowerCase();
return i === "none" ? `${r}${e.name}.svg` : `${r}${e.name}-${i}.svg`;
}), o = (r) => h(ae(r)), h = (r) => {
if (r !== null)
return `oc-icon-${r}`;
}, c = (r) => {
if (e.accessibleLabel !== "") {
const i = document.createElement("title");
i.setAttribute("id", n.value), i.appendChild(document.createTextNode(e.accessibleLabel)), r.insertBefore(i, r.firstChild);
}
return r;
};
return (r, i) => (l(), $(se(r.type), {
class: A([{ "oc-button-reset": r.type === "button" }, "oc-icon", o(r.size)])
}, {
default: T(() => [
P(d(Pe), {
src: s.value,
"transform-source": c,
"aria-hidden": r.accessibleLabel === "" ? "true" : null,
"aria-labelledby": r.accessibleLabel === "" ? null : n.value,
focusable: r.accessibleLabel === "" ? "false" : null,
style: ce(r.color !== "" ? { fill: r.color } : {}),
onLoaded: i[0] || (i[0] = (C) => a("loaded"))
}, null, 8, ["src", "aria-hidden", "aria-labelledby", "focusable", "style"])
]),
_: 1
}, 8, ["class"]));
}
}), Et = /* @__PURE__ */ B({
__name: "OcApplicationIcon",
props: {
icon: {},
colorPrimary: {}
},
setup(e) {
const t = p(() => "rgba(255,255,255,0.7)"), a = p(() => vt(e.colorPrimary || "")), n = p(() => !!e.colorPrimary), s = p(() => {
const h = wt(e.icon);
return $t(kt(Ve(h), Ve("#ffffff"), 4));
}), o = p(() => {
const h = d(n) ? d(a) : d(s);
return {
background: d(h)
};
});
return (h, c) => (l(), u("div", {
class: "oc-application-icon oc-flex-inline oc-flex-middle oc-flex-center",
style: ce(o.value)
}, [
P(q, {
name: h.icon,
color: t.value,
size: "medium"
}, null, 8, ["name", "color"])
], 4));
}
}), Ft = ["src", "alt", "aria-hidden", "title", "loading"], Ue = /* @__PURE__ */ B({
__name: "OcImage",
props: {
src: {},
alt: { default: "" },
loadingType: { default: "eager" },
title: {}
},
setup(e) {
const t = p(() => e.alt.length === 0);
return (a, n) => (l(), u("img", {
src: a.src,
alt: a.alt,
"aria-hidden": `${t.value}`,
title: a.title,
loading: a.loadingType
}, null, 8, Ft));
}
}), Rt = (e) => e.split(/[ -]/).map((t) => t.replace(/[^\p{L}\p{Nd}]/giu, "")).filter(Boolean).map((t) => t.charAt(0)).slice(0, 3).join("").toUpperCase(), Ht = ["width", "aria-label", "aria-hidden", "focusable", "role", "data-test-user-name"], Ge = /* @__PURE__ */ B({
__name: "OcAvatar",
props: {
accessibleLabel: { default: "" },
color: { default: "white" },
backgroundColor: {},
src: { default: "" },
userName: { default: "" },
width: { default: 50 }
},
setup(e) {
const t = [
"#b82015",
"#c21c53",
"#9C27B0",
"#673AB7",
"#3F51B5",
"#106892",
"#055c68",
"#208377",
"#1a761d",
"#476e1a",
"#636d0b",
"#8e5c11",
"#795548",
"#465a64"
], a = K(!1), n = p(() => !a.value && !!e.src), s = p(() => d(e.backgroundColor) ? e.backgroundColor : n.value ? "" : r(e.userName.length, t)), o = p(() => {
const i = {
width: `${e.width}px`,
height: `${e.width}px`,
lineHeight: `${e.width}px`
}, C = {
backgroundColor: s.value,
fontSize: `${Math.floor(e.width / 2.5)}px`,
fontFamily: "Helvetica, Arial, sans-serif",
color: "white"
};
return Object.assign(i, C), i;
}), h = p(() => n.value ? "" : Rt(e.userName)), c = () => {
a.value = !0;
}, r = (i, C) => C[i % C.length];
return (i, C) => (l(), u("span", {
class: "vue-avatar--wrapper oc-avatar",
style: ce(o.value),
width: i.width,
"aria-label": i.accessibleLabel === "" ? null : i.accessibleLabel,
"aria-hidden": i.accessibleLabel === "" ? "true" : null,
focusable: i.accessibleLabel === "" ? "false" : null,
role: i.accessibleLabel === "" ? null : "img",
"data-test-user-name": i.userName
}, [
n.value ? (l(), $(Ue, {
key: 0,
"loading-type": "lazy",
class: "avatarImg",
src: i.src,
onError: c
}, null, 8, ["src"])) : (l(), u("span", {
key: 1,
class: "avatar-initials",
style: ce({ color: i.color })
}, O(h.value), 5))
], 12, Ht));
}
}), Nt = ["textContent"], We = /* @__PURE__ */ B({
__name: "OcAvatarCount",
props: {
count: {},
size: { default: 30 }
},
setup(e) {
const t = p(() => Math.floor(e.size / 2.5) + "px");
return (a, n) => (l(), u("span", {
class: "oc-avatar-count",
style: ce({ width: a.size + "px", height: a.size + "px", fontSize: t.value }),
textContent: O(`+${a.count}`)
}, null, 12, Nt));
}
}), jt = ["data-test-item-name", "aria-label", "aria-hidden", "focusable", "role"], ge = /* @__PURE__ */ B({
__name: "OcAvatarItem",
props: {
name: {},
accessibleLabel: { default: "" },
background: { default: "var(--oc-role-secondary)" },
icon: {},
iconColor: { default: "var(--oc-role-on-secondary)" },
iconFillType: { default: "fill" },
iconSize: { default: "small" },
width: { default: 30 }
},
setup(e) {
const t = p(() => e.width + "px"), a = p(() => e.icon !== null), n = p(() => e.background || s()), s = () => {
const o = [
"#b82015",
"#c21c53",
"#9C27B0",
"#673AB7",
"#3F51B5",
"#106892",
"#055c68",
"#208377",
"#1a761d",
"#476e1a",
"#636d0b",
"#8e5c11",
"#795548",
"#465a64"
];
return o[Math.floor(Math.random() * o.length)];
};
return (o, h) => (l(), u("div", {
"data-test-item-name": o.name,
"aria-label": o.accessibleLabel === "" ? null : o.accessibleLabel,
"aria-hidden": o.accessibleLabel === "" ? "true" : null,
focusable: o.accessibleLabel === "" ? "false" : null,
role: o.accessibleLabel === "" ? null : "img"
}, [
v("span", {
class: "oc-avatar-item",
style: ce({
backgroundColor: n.value,
"--icon-color": o.iconColor,
"--width": t.value
})
}, [
a.value ? (l(), $(q, {
key: 0,
name: o.icon,
size: o.iconSize,
"fill-type": o.iconFillType
}, null, 8, ["name", "size", "fill-type"])) : w("", !0)
], 4)
], 8, jt));
}
}), Xe = /* @__PURE__ */ B({
__name: "OcAvatarFederated",
props: {
name: {},
accessibleLabel: { default: "" },
iconSize: { default: "small" },
width: { default: 30 }
},
setup(e) {
return (t, a) => (l(), $(ge, {
width: t.width,
"icon-size": t.iconSize,
icon: "cloud",
"icon-fill-type": "line",
"icon-color": "#5AAB9F",
name: t.name,
"accessible-label": t.accessibleLabel
}, null, 8, ["width", "icon-size", "name", "accessible-label"]));
}
}), Je = /* @__PURE__ */ B({
__name: "OcAvatarGroup",
props: {
name: {},
accessibleLabel: { default: "" },
iconSize: { default: "small" },
width: { default: 30 }
},
setup(e) {
return (t, a) => (l(), $(ge, {
width: t.width,
"icon-size": t.iconSize,
icon: "group",
name: t.name,
"accessible-label": t.accessibleLabel
}, null, 8, ["width", "icon-size", "name", "accessible-label"]));
}
}), Qe = /* @__PURE__ */ B({
__name: "OcAvatarGuest",
props: {
name: {},
accessibleLabel: { default: "" },
iconSize: { default: "small" },
width: { default: 30 }
},
setup(e) {
return (t, a) => (l(), $(ge, {
width: t.width,
"icon-size": t.iconSize,
icon: "global",
"icon-fill-type": "line",
"icon-color": "#D78841",
name: t.name,
"accessible-label": t.accessibleLabel
}, null, 8, ["width", "icon-size", "name", "accessible-label"]));
}
}), Ye = /* @__PURE__ */ B({
__name: "OcAvatarLink",
props: {
name: {},
accessibleLabel: { default: "" },
iconSize: { default: "small" },
width: { default: 30 }
},
setup(e) {
return (t, a) => (l(), $(ge, {
width: t.width,
"icon-size": t.iconSize,
icon: "link",
name: t.name,
"accessible-label": t.accessibleLabel
}, null, 8, ["width", "icon-size", "name", "accessible-label"]));
}
}), qt = ["textContent"], Kt = /* @__PURE__ */ B({
__name: "OcAvatars",
props: {
items: {},
accessibleDescription: {},
isTooltipDisplayed: { type: Boolean, default: !1 },
maxDisplayed: {},
stacked: { type: Boolean, default: !1 },
hoverEffect: { type: Boolean, default: !1 },
gapSize: { default: "xsmall" },
iconSize: { default: "small" },
width: { default: 30 }
},
setup(e) {
const t = ue("avatarsRef"), a = p(() => e.maxDisplayed && e.maxDisplayed < e.items.length), n = p(() => {
const i = e.items.filter((C) => C.avatarType === "user");
return a.value ? i.slice(0, e.maxDisplayed) : i;
}), s = p(() => {
const i = e.items.filter((C) => C.avatarType !== "user");
return a.value ? e.maxDisplayed <= n.value.length ? [] : i.slice(0, e.maxDisplayed - n.value.length) : i;
}), o = p(() => {
if (e.isTooltipDisplayed) {
const i = n.value.map((y) => y.displayName);
s.value.length > 0 && i.push(...s.value.map((y) => y.name));
let C = i.join(", ");
return a.value && (C += ` +${e.items.length - e.maxDisplayed}`), C;
}
return null;
}), h = (i) => {
switch (i.avatarType) {
case "link":
return Ye;
case "remote":
return Xe;
case "group":
return Je;
case "guest":
return Qe;
}
}, c = p(() => e.stacked && e.hoverEffect && d(e.items).length > 1), r = p(() => [
`oc-avatars-gap-${ae(e.gapSize)}`,
...e.stacked ? ["oc-avatars-stacked"] : [],
...d(c) ? ["oc-avatars-hover-effect"] : []
]);
return be(() => {
if (!d(t) || !d(c))
return;
Array.from(d(t).children).forEach((C, y) => {
C.style.zIndex = `${900 + y}`;
});
}), (i, C) => {
const y = he("oc-tooltip");
return l(), u("span", null, [
Q((l(), u("span", {
ref_key: "avatarsRef",
ref: t,
class: A(["oc-avatars", r.value]),
"aria-hidden": "true"
}, [
F(i.$slots, "userAvatars", {
avatars: n.value,
width: i.width
}, () => [
n.value.length > 0 ? (l(!0), u(W, { key: 0 }, _(n.value, (x) => (l(), $(Ge, {
key: x.username,
src: x.avatar,
"user-name": x.displayName,
width: i.width,
"icon-size": i.iconSize
}, null, 8, ["src", "user-name", "width", "icon-size"]))), 128)) : w("", !0)
]),
s.value.length > 0 ? (l(!0), u(W, { key: 0 }, _(s.value, (x, L) => (l(), $(se(h(x)), {
key: x.name + L,
name: x.name,
width: i.width,
"icon-size": i.iconSize
}, null, 8, ["name", "width", "icon-size"]))), 128)) : w("", !0),
a.value ? (l(), $(We, {
key: 1,
count: i.items.length - i.maxDisplayed
}, null, 8, ["count"])) : w("", !0)
], 2)), [
[y, o.value]
]),
i.accessibleDescription ? (l(), u("span", {
key: 0,
class: "oc-invisible-sr",
textContent: O(i.accessibleDescription)
}, null, 8, qt)) : w("", !0)
]);
};
}
}), U = /* @__PURE__ */ B({
__name: "OcButton",
props: {
appearance: { default: "outline" },
ariaLabel: {},
colorRole: { default: "secondary" },
disabled: { type: Boolean, default: !1 },
gapSize: { default: "medium" },
href: {},
justifyContent: { default: "center" },
showSpinner: { type: Boolean, default: !1 },
size: { default: "medium" },
submit: { default: "button" },
target: {},
to: {},
type: { default: "button" },
noHover: { type: Boolean, default: !1 }
},
emits: ["click"],
setup(e, { emit: t }) {
const a = t, n = p(() => {
const c = [
"oc-button",
"oc-rounded",
`oc-button-${ae(e.size)}`,
`oc-button-justify-content-${e.justifyContent}`,
`oc-button-gap-${ae(e.gapSize)}`,
`oc-button-${Ae(e.colorRole)}`,
`oc-button-${e.appearance}`,
`oc-button-${Ae(e.colorRole)}-${e.appearance}`
];
return e.noHover && c.push("no-hover"), c;
}), s = p(() => ({
...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 }
})), o = p(() => ({
...e.type === "button" && { click: h }
})), h = (c) => {
a("click", c);
};
return (c, r) => {
const i = Y("oc-spinner");
return l(), $(se(c.type), X(s.value, {
"aria-label": c.ariaLabel,
class: n.value
}, ke(o.value)), {
default: T(() => [
c.showSpinner ? (l(), $(i, {
key: 0,
size: "small",
class: "spinner"
})) : w("", !0),
F(c.$slots, "default")
]),
_: 3
}, 16, ["aria-label", "class"]);
};
}
}), Ze = {
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);
}
};
}
}, Ut = {
name: "customProps",
defaultValue: !0,
fn(e) {
return {
onCreate() {
e.popper.setAttribute("aria-hidden", "true"), e.popper.classList.add("oc-tooltip");
}
};
}
}, $e = (e) => {
if (e)
try {
e.destroy();
} catch {
}
}, Ie = (e, { value: t = {} }) => {
if (Object.prototype.toString.call(t) !== "[object Object]" && (t = { content: t }), t.content !== 0 && !t.content || t.content === "") {
$e(e.tooltip), e.tooltip = null;
return;
}
const a = Pt.all([
{
ignoreAttributes: !0,
interactive: !1,
aria: {
content: null,
expanded: !1
}
},
t
]);
if (!e.tooltip) {
e.tooltip = Ke(e, {
...a,
plugins: [Ze, Ut]
});
return;
}
e.tooltip.setProps(a);
}, Ss = {
name: "OcTooltip",
beforeMount: Ie,
updated: Ie,
unmounted: (e) => $e(e.tooltip)
}, Gt = ["id"], Se = /* @__PURE__ */ B({
__name: "OcDrop",
props: {
closeOnClick: { type: Boolean, default: !1 },
dropId: { default: () => Z("oc-drop-") },
isNested: { type: Boolean, default: !1 },
mode: { default: "click" },
offset: {},
paddingSize: { default: "medium" },
popperOptions: { default: () => ({}) },
position: { default: "bottom-start" },
target: {},
toggle: { default: "" }
},
emits: ["hideDrop", "showDrop"],
setup(e, { expose: t, emit: a }) {
const n = a, s = K(null), o = K(null), h = (g) => {
var S;
(S = d(o)) == null || S.show(g);
}, c = (g) => {
var S;
(S = d(o)) == null || S.hide(g);
};
t({ show: h, hide: c, tippy: o });
const r = (g) => {
var V;
const S = (V = g.target.closest(".oc-button")) == null ? void 0 : V.hasAttribute("aria-expanded");
e.closeOnClick && !S && c();
}, i = (g) => {
var k;
const S = (k = s.value) == null ? void 0 : k.closest(".tippy-box");
g.relatedTarget && !(S != null && S.contains(g.relatedTarget)) && c();
};
be(() => {
var g;
(g = s.value) == null || g.addEventListener("focusout", i);
}), Te(() => {
var g;
(g = s.value) == null || g.removeEventListener("focusout", i);
});
const C = () => {
var g, S;
return (S = (g = window.matchMedia) == null ? void 0 : g.call(window, "(hover: none) and (pointer: coarse)")) == null ? void 0 : S.matches;
}, y = p(() => ({
hover: "mouseenter focus"
})[d(x)] || d(x)), x = p(() => C() ? "click" : e.mode), L = p(() => `oc-p-${ae(e.paddingSize)}`);
return ee(
() => e.position,
() => {
var g;
(g = d(o)) == null || g.setProps({ placement: e.position });
}
), ee(x, () => {
var g;
(g = d(o)) == null || g.setProps({ trigger: y.value });
}), Te(() => {
$e(d(o));
}), be(() => {
var k, z, M;
$e(d(o));
const g = e.target ? document.querySelector(e.target) : e.toggle ? document.querySelector(e.toggle) : (k = s.value) == null ? void 0 : k.previousElementSibling, S = s.value;
if (!g || !S)
return;
const V = {
trigger: y.value,
placement: e.position,
arrow: !1,
hideOnClick: !(e.isNested && d(x) === "hover"),
interactive: !0,
plugins: [Ze],
theme: "none",
maxWidth: 416,
offset: e.offset ?? 0,
...!e.isNested && {
onShow: (R) => {
n("showDrop"), xt({ exclude: R });
},
onHide: () => {
n("hideDrop");
}
},
popperOptions: {
...e.popperOptions,
modifiers: [
...(z = e.popperOptions) != null && z.modifiers ? e.popperOptions.modifiers : [],
{
name: "fixVerticalPosition",
enabled: !0,
phase: "beforeWrite",
requiresIfExists: ["offset", "preventOverflow", "flip"],
fn({ state: R }) {
const N = Vt(R), j = R.modifiersData.fullHeight || R.elements.popper.offsetHeight, b = N.top * -1 - 10, m = b + j + N.bottom * -1, D = m - b, oe = m - D;
j > D && j > oe && (R.styles.popper.top = `-${b}px`, R.modifiersData.fullHeight = j), j > m && (R.styles.popper.maxHeight = `${m - 10}px`, R.styles.popper.overflowY = "auto", R.styles.popper.overflowX = "hidden");
}
}
]
},
content: S
};
e.target && (V.triggerTarget = e.toggle ? document.querySelector(e.toggle) : (M = s.value) == null ? void 0 : M.previousElementSibling), o.value = Ke(g, V);
}), (g, S) => (l(), u("div", {
id: g.dropId,
ref_key: "drop",
ref: s,
class: "oc-drop oc-box-shadow-medium oc-rounded",
onClick: r
}, [
g.$slots.default ? (l(), u("div", {
key: 0,
class: A(["oc-card oc-card-body", L.value])
}, [
F(g.$slots, "default")
], 2)) : F(g.$slots, "special", { key: 1 })
], 8, Gt));
}
}), Wt = ["id", "aria-label"], Xt = { class: "oc-breadcrumb-list oc-flex oc-m-rm oc-p-rm" }, Jt = ["data-key", "data-item-id", "aria-hidden", "onDragenter", "onDragleave", "onMouseleave", "onDrop"], Qt = { class: "oc-breadcrumb-item-text oc-breadcrumb-item-navigable" }, Yt = ["textContent"], Zt = ["aria-current", "textContent"], _t = {
key: 0,
class: "oc-breadcrumb-mobile-current"
}, ea = ["textContent"], ta = /* @__PURE__ */ B({
__name: "OcBreadcrumb",
props: {
items: {},
contextMenuPadding: { default: "medium" },
id: { default: () => Z("oc-breadcrumbs-") },
maxWidth: { default: () => -1 },
showContextActions: { type: Boolean, default: !1 },
truncationOffset: { default: 2 },
variation: { default: "default" }
},
emits: ["itemDroppedBreadcrumb"],
setup(e, { emit: t }) {
const a = t, { $gettext: n } = ne(), s = K([]), o = K([]), h = K([]);
h.value = e.items;
const c = (M) => document.querySelector(`.oc-breadcrumb-list [data-item-id="${M}"]`), r = (M, R) => !(!M.id || R === d(h).length - 1 || M.isTruncationPlaceholder || M.isStaticNav), i = (M, R) => {
if (r(M, R) && typeof M.to == "object") {
const N = M.to;
N.path = N.path || "/", a(Ct, N);
}
}, C = () => {
let M = 100;
return s.value.forEach((R) => {
var b;
const N = c(R.id), j = ((b = N == null ? void 0 : N.getBoundingClientRect()) == null ? void 0 : b.width) || 0;
M += j;
}), M;
}, y = (M) => {
const R = e.maxWidth;
if (!R)
return;
const N = C();
if (!(R < N) || s.value.length <= e.truncationOffset + 1)
return;
const b = s.value.splice(M, 1);
o.value.push(b[0]), y(M);
}, x = p(
() => o.value.length >= 1 ? d(o)[d(o).length - 1] : { to: {} }
);
ee([() => e.maxWidth, () => e.items], () => {
h.value = [...e.items], h.value.length > e.truncationOffset - 1 && h.value.splice(e.truncationOffset - 1, 0, {
text: "...",
allowContextActions: !1,
to: {},
isTruncationPlaceholder: !0
}), s.value = [...h.value], o.value = [], pe(() => {
y(e.truncationOffset);
});
}, { immediate: !0 });
const g = p(() => {
if (!(e.items.length === 0 || !e.items))
return [...e.items].reverse()[0];
}), S = p(() => {
var M;
return (M = [...e.items].reverse()[1]) == null ? void 0 : M.to;
}), V = p(() => n("Show actions for current folder")), k = (M) => e.items.length - 1 === M ? "page" : null, z = (M, R, N, j) => {
var oe, f;
if (!r(M, R) || (((oe = j.dataTransfer) == null ? void 0 : oe.types) || []).some((H) => H === "Files") || (f = j.currentTarget) != null && f.contains(j.relatedTarget))
return;
const m = c(M.id).children[0].classList, D = "oc-breadcrumb-item-dragover";
N ? m.remove(D) : m.add(D);
};
return (M, R) => {
const N = Y("router-link"), j = he("oc-tooltip");
return l(), u(W, null, [
v("nav", {
id: M.id,
class: A(`oc-breadcrumb oc-breadcrumb-${M.variation}`),
"aria-label": d(n)("Breadcrumbs")
}, [
v("ol", Xt, [
(l(!0), u(W, null, _(h.value, (b, m) => (l(), u("li", {
key: m,
"data-key": m,
"data-item-id": b.id,
"aria-hidden": b.isTruncationPlaceholder,
class: A([
"oc-breadcrumb-list-item",
"oc-flex",
"oc-flex-middle",
{
"oc-invisible-sr": o.value.indexOf(b) !== -1 || b.isTruncationPlaceholder && o.value.length === 0
}
]),
onDragover: R[0] || (R[0] = de(() => {
}, ["prevent"])),
onDragenter: de((D) => z(b, m, !1, D), ["prevent"]),
onDragleave: de((D) => z(b, m, !0, D), ["prevent"]),
onMouseleave: (D) => z(b, m, !0, D),
onDrop: (D) => i(b, m)
}, [
b.to ? (l(), $(N, {
key: 0,
"aria-current": k(m),
to: b.isTruncationPlaceholder ? x.value.to : b.to
}, {
default: T(() => [
v("span", Qt, O(b.text), 1)
]),
_: 2
}, 1032, ["aria-current", "to"])) : b.onClick ? (l(), $(U, {
key: 1,
"aria-current": k(m),
appearance: "raw",
class: "oc-flex",
"no-hover": "",
onClick: b.onClick
}, {
default: T(() => [
v("span", {
class: A([
"oc-breadcrumb-item-text",
"oc-breadcrumb-item-navigable",
{
"oc-breadcrumb-item-text-last": m === h.value.length - 1
}
]),
textContent: O(b.text)
}, null, 10, Yt)
]),
_: 2
}, 1032, ["aria-current", "onClick"])) : (l(), u("span", {
key: 2,
class: "oc-breadcrumb-item-text",
"aria-current": k(m),
tabindex: "-1",
textContent: O(b.text)
}, null, 8, Zt)),
m !== h.value.length - 1 ? (l(), $(q, {
key: 3,
color: "var(--oc-role-on-surface)",
name: "arrow-right-s",
class: "oc-mx-xs",
"fill-type": "line"
})) : w("", !0),
M.showContextActions && m === h.value.length - 1 ? (l(), u(W, { key: 4 }, [
Q((l(), $(U, {
id: "oc-breadcrumb-contextmenu-trigger",
"aria-label": V.value,
appearance: "raw",
"no-hover": ""
}, {
default: T(() => [
P(q, {
name: "more-2",
color: "var(--oc-role-on-surface)"
})
]),
_: 1
}, 8, ["aria-label"])), [
[j, V.value]
]),
P(Se, {
"drop-id": "oc-breadcrumb-contextmenu",
toggle: "#oc-breadcrumb-contextmenu-trigger",
mode: "click",
"close-on-click": "",
"padding-size": M.contextMenuPadding
}, {
default: T(() => [
F(M.$slots, "contextMenu")
]),
_: 3
}, 8, ["padding-size"])
], 64)) : w("", !0)
], 42, Jt))), 128))
]),
S.value && h.value.length > 1 ? (l(), $(U, {
key: 0,
appearance: "raw",
type: "router-link",
"aria-label": d(n)("Navigate one level up"),
to: S.value,
class: "oc-breadcrumb-mobile-navigation"
}, {
default: T(() => [
P(q, {
name: "arrow-left-s",
"fill-type": "line",
size: "large"
})
]),
_: 1
}, 8, ["aria-label", "to"])) : w("", !0)
], 10, Wt),
h.value.length > 1 ? (l(), u("div", _t, [
v("span", {
class: "oc-text-truncate",
"aria-current": "page",
textContent: O(g.value.text)
}, null, 8, ea)
])) : w("", !0)
], 64);
};
}
}), aa = ["id", "value", "disabled", "aria-label"], oa = ["for", "textContent"], la = /* @__PURE__ */ B({
__name: "OcCheckbox",
props: /* @__PURE__ */ me({
label: {},
disabled: { type: Boolean, default: !1 },
id: { default: () => Z("oc-checkbox-") },
labelHidden: { type: Boolean, default: !1 },
option: {},
size: { default: "medium" }
}, {
modelValue: { type: [Boolean, Array] },
modelModifiers: {}
}),
emits: /* @__PURE__ */ me(["click"], ["update:modelValue"]),
setup(e, { emit: t }) {
const a = t, n = Ce(e, "modelValue"), s = p(() => [
"oc-checkbox",
"oc-rounded",
"oc-checkbox-" + ae(e.size),
{ "oc-checkbox-checked": h.value }
]), o = p(() => ({
"oc-cursor-pointer": !e.disabled
})), h = p(() => {
const r = d(n);
return Array.isArray(r) ? r.some((i) => Bt(i, e.option)) : r;
}), c = (r) => {
n.value = !n.value, a("click", r);
};
return (r, i) => (l(), u("span", {
onClick: i[1] || (i[1] = (C) => r.$emit("click", C))
}, [
Q(v("input", {
id: r.id,
"onUpdate:modelValue": i[0] || (i[0] = (C) => n.value = C),
type: "checkbox",
name: "checkbox",
class: A(s.value),
value: r.option,
disabled: r.disabled,
"aria-label": r.labelHidden ? r.label : null,
onKeydown: ve(c, ["enter"])
}, null, 42, aa), [
[dt, n.value]
]),
r.labelHidden ? w("", !0) : (l(), u("label", {
key: 0,
for: r.id,
class: A(o.value),
textContent: O(r.label)
}, null, 10, oa))
]));
}
}), sa = ["for"], na = {
key: 0,
class: "oc-text-error",
"aria-hidden": "true"
}, ia = { class: "oc-color-input-wrapper oc-position-relative" }, ra = ["id", "aria-invalid", "value", "disabled"], ca = ["id", "textContent"], da = /* @__PURE__ */ B({
inheritAttrs: !1,
__name: "OcColorInput",
props: {
id: { default: () => Z("oc-color-input-") },
modelValue: { default: "" },
clearButtonEnabled: { type: Boolean, default: !0 },
disabled: { type: Boolean, default: !1 },
label: {},
errorMessage: {},
fixMessageLine: { type: Boolean, default: !1 },
descriptionMessage: {},
requiredMark: { type: Boolean, default: !1 }
},
emits: ["change", "update:modelValue"],
setup(e, { emit: t }) {
const a = t, n = p(() => e.fixMessageLine || !!e.errorMessage || !!e.descriptionMessage), s = p(() => `${e.id}-message`), o = ye(), h = p(() => {
const L = {};
(e.errorMessage || e.descriptionMessage) && (L["aria-describedby"] = s.value);
const { change: g, input: S, class: V, ...k } = o;
return { ...k, ...L };
}), c = p(() => (!!e.errorMessage).toString()), r = p(() => e.errorMessage ? e.errorMessage : e.descriptionMessage), i = p(() => !e.disabled && e.clearButtonEnabled && !!e.modelValue);
function C() {
x(""), y(null);
}
const y = (L) => {
a("change", L);
}, x = (L) => {
a("update:modelValue", L);
};
return (L, g) => (l(), u("div", {
class: A(L.$attrs.class)
}, [
F(L.$slots, "label", {}, () => [
v("label", {
class: "oc-label",
for: L.id
}, [
J(O(L.label) + " ", 1),
L.requiredMark ? (l(), u("span", na, "*")) : w("", !0)
], 8, sa)
]),
v("div", ia, [
v("input", X({ id: L.id }, h.value, {
type: "color",
"aria-invalid": c.value,
class: ["oc-color-input oc-input oc-rounded", {
"oc-color-input-danger": !!L.errorMessage,
"clear-action-visible": i.value
}],
value: L.modelValue,
disabled: L.disabled,
onChange: g[0] || (g[0] = (S) => y(S.target.value)),
onInput: g[1] || (g[1] = (S) => x(S.target.value))
}), null, 16, ra),
i.value ? (l(), $(U, {
key: 0,
class: "oc-mr-xs oc-position-center-right oc-color-input-btn-clear",
appearance: "raw",
"no-hover": "",
onClick: C
}, {
default: T(() => [
P(q, {
name: "close",
size: "small"
})
]),
_: 1
})) : w("", !0)
]),
n.value ? (l(), u("div", {
key: 0,
class: A(["oc-color-input-message oc-text-small", {
"oc-color-input-description": !!L.descriptionMessage,
"oc-color-input-danger": !!L.errorMessage
}])
}, [
L.errorMessage ? (l(), $(q, {
key: 0,
name: "error-warning",
size: "small",
"fill-type": "line",
"aria-hidden": "true",
class: "oc-mr-xs"
})) : w("", !0),
v("span", {
id: s.value,
class: A({
"oc-color-input-description": !!L.descriptionMessage,
"oc-color-input-danger": !!L.errorMessage
}),
textContent: O(r.value)
}, null, 10, ca)
], 2)) : w("", !0)
], 2));
}
}), ua = { class: "info-drop-content" }, pa = { class: "oc-flex oc-flex-between info-header oc-border-b oc-pb-s" }, fa = ["textContent"], ma = ["textContent"], ha = {
key: 1,
class: "info-list"
}, ga = ["textContent"], ba = {
components: { FocusTrap: Oe }
}, _e = /* @__PURE__ */ B({
...ba,
__name: "OcInfoDrop",
props: {
title: {},
dropId: { default: () => Z("oc-info-drop-") },
endText: { default: "" },
list: { default: () => [] },
mode: { default: "click" },
readMoreLink: { default: "" },
text: { default: "" },
toggle: { default: "" }
},
setup(e) {
const t = K(!1), a = p(() => (e.list || []).filter((n) => !!n.text));
return (n, s) => (l(), $(Se, {
ref: "drop",
class: "oc-width-1-1 oc-info-drop",
"drop-id": n.dropId,
toggle: n.toggle,
mode: n.mode,
"close-on-click": "",
onHideDrop: s[0] || (s[0] = () => t.value = !1),
onShowDrop: s[1] || (s[1] = () => t.value = !0)
}, {
default: T(() => [
P(d(Oe), { active: t.value }, {
default: T(() => [
v("div", ua, [
v("div", pa, [
v("h4", {
class: "oc-m-rm info-title",
textContent: O(n.$gettext(n.title))
}, null, 8, fa),
P(U, {
appearance: "raw",
"aria-label": n.$gettext("Close")
}, {
default: T(() => [
P(q, {
name: "close",
"fill-type": "line",
size: "medium"
})
]),
_: 1
}, 8, ["aria-label"])
]),
n.text ? (l(), u("p", {
key: 0,
class: "info-text",
textContent: O(n.$gettext(n.text))
}, null, 8, ma)) : w("", !0),
a.value.length ? (l(), u("dl", ha, [
(l(!0), u(W, null, _(a.value, (o, h) => (l(), $(se(o.headline ? "dt" : "dd"), { key: h }, {
default: T(() => [
J(O(n.$gettext(o.text)), 1)
]),
_: 2
}, 1024))), 128))
])) : w("", !0),
n.endText ? (l(), u("p", {
key: 2,
class: "info-text-end",
textContent: O(n.$gettext(n.endText))
}, null, 8, ga)) : w("", !0),
n.readMoreLink ? (l(), $(U, {
key: 3,
type: "a",
appearance: "raw",
size: "small",
class: "info-more-link",
href: n.readMoreLink,
target: "_blank"
}, {
default: T(() => [
J(O(n.$gettext("Read more")), 1)
]),
_: 1
}, 8, ["href"])) : w("", !0)
])
]),
_: 1
}, 8, ["active"])
]),
_: 1
}, 8, ["drop-id", "toggle", "mode"]));
}
}), ya = { class: "oc-contextual-helper" }, va = /* @__PURE__ */ B({
__name: "OcContextualHelper",
props: {
title: {},
endText: { default: "" },
list: { default: () => [] },
readMoreLink: { default: "" },
text: { default: "" }
},
setup(e) {
const t = K(Z("oc-contextual-helper-")), a = p(() => `${t.value}-button`), n = p(() => `#${a.value}`), s = p(() => ({ title: e.title, text: e.text, list: e.list, endText: e.endText, readMoreLink: e.readMoreLink }));
return (o, h) => (l(), u("div", ya, [
P(U, {
id: a.value,
"aria-label": o.$gettext("Show more information"),
appearance: "raw",
"no-hover": ""
}, {
default: T(() => [
P(q, {
name: "question",
"fill-type": "line",
size: "small"
})
]),
_: 1
}, 8, ["id", "aria-label"]),
P(_e, X({
"drop-id": t.value,
toggle: n.value
}, s.value), null, 16, ["drop-id", "toggle"])
]));
}
}), wa = /* @__PURE__ */ B({
__name: "OcDatepicker",
props: {
label: {},
currentDate: {},
isClearable: { type: Boolean, default: !0 },
minDate: {}
},
emits: ["dateChanged"],
setup(e, { emit: t }) {
const a = t, { $gettext: n, current: s } = ne(), o = K(""), h = p(() => {
const i = ze.fromISO(d(o)).endOf("day");
return i.isValid ? i : null;
}), c = p(() => !e.minDate || !d(h) ? !1 : d(h) < e.minDate), r = p(() => d(c) ? n("The date must be after %{date}", {
date: e.minDate.minus({ day: 1 }).setLocale(s).toLocaleString(ze.DATE_SHORT)
}) : "");
return ee(
() => e.currentDate,
() => {
if (e.currentDate) {
o.value = e.currentDate.toISODate();
return;
}
o.value = void 0;
},
{ immediate: !0 }
), ee(
h,
() => {
a("dateChanged", { date: d(h), error: d(c) });
},
{ deep: !0 }
), (i, C) => {
var x;
const y = Y("oc-text-input");
return l(), $(y, X({
modelValue: o.value,
"onUpdate:modelValue": C[0] || (C[0] = (L) => o.value = L)
}, i.$attrs, {
label: i.label,
type: "date",
min: (x = i.minDate) == null ? void 0 : x.toISODate(),
"fix-message-line": !0,
"error-message": r.value,
"clear-button-enabled": i.isClearable,
"clear-button-accessible-label": d(n)("Clear date"),
class: "oc-date-picker"
}), null, 16, ["modelValue", "label", "min", "error-message", "clear-button-enabled", "clear-button-accessible-label"]);
};
}
}), $a = { class: "details-list" }, ka = /* @__PURE__ */ B({
__name: "OcDefinitionList",
props: {
items: {}
},
setup(e) {
return (t, a) => (l(), u("dl", $a, [
(l(!0), u(W, null, _(t.items, (n) => (l(), u(W, {
key: n.term
}, [
v("dt", null, O(n.term), 1),
v("dd", null, O(n.definition), 1)
], 64))), 128))
]));
}
}), Ca = { class: "oc-dropzone" }, Oa = /* @__PURE__ */ B({
name: "OcDropzone",
__name: "OcDropzone",
setup(e) {
return (t, a) => (l(), u("div", Ca, [
F(t.$slots, "default")
]));
}
}), Sa = ["for"], Ma = {
key: 0,
class: "oc-text-error",
"aria-hidden": "true"
}, Ta = { class: "oc-flex oc-flex-middle" }, Da = ["id", "aria-invalid", "multiple", "accept"], Ba = { class: "oc-file-input-files oc-rounded oc-ml-s" }, La = {
key: 0,
class: "oc-py-xs oc-px-s oc-text-small oc-flex oc-flex-middle"
}, xa = ["id", "textContent"], Va = /* @__PURE__ */ B({
inheritAttrs: !1,
__name: "OcFileInput",
props: {
label: {},
id: { default: () => Z("oc-fileinput-") },
fileTypes: { default: "" },
multiple: { type: Boolean, default: !1 },
modelValue: { default: null },
clearButtonEnabled: { type: Boolean, default: !0 },
disabled: { type: Boolean, default: !1 },
errorMessage: { default: "" },
fixMessageLine: { type: Boolean, default: !1 },
descriptionMessage: { default: "" },
requiredMark: { type: Boolean, default: !1 }
},
emits: ["update:modelValue", "focus"],
setup(e, { emit: t }) {
const a = t, n = p(() => e.fixMessageLine || !!e.errorMessage || !!e.descriptionMessage), s = p(() => `${e.id}-message`), o = ye(), h = p(() => {
const V = {};
(e.errorMessage || e.descriptionMessage) && (V["aria-describedby"] = s.value);
const { change: k, input: z, focus: M, class: R, ...N } = o;
return { ...N, ...V };
}), c = p(() => (!!e.errorMessage).toString()), r = p(() => e.errorMessage ? e.errorMessage : e.descriptionMessage), i = ue("inputRef"), C = ue("inputBtnRef"), y = p(() => d(e.modelValue) ? Array.from(d(i).files).map((k) => k.name).join(", ") : ""), x = () => {
d(i) && d(i).click();
}, L = () => {
a("update:modelValue", null), d(i).value = null;
}, g = () => {
a("update:modelValue", d(i).files);
}, S = async () => {
await pe(), d(C).focus(), a("focus", d(C));
};
return (V, k) => (l(), u("div", {
class: A(V.$attrs.class)
}, [
F(V.$slots, "label", {}, () => [
v("label", {
class: "oc-label",
for: V.id
}, [
J(O(V.label) + " ", 1),
V.requiredMark ? (l(), u("span", Ma, "*")) : w("", !0)
], 8, Sa)
], !0),
v("div", Ta, [
v("input", X({ id: V.id }, h.value, {
ref_key: "inputRef",
ref: i,
"aria-invalid": c.value,
class: "oc-invisible oc-file-input",
type: "file",
multiple: V.multiple,
accept: V.fileTypes,
onChange: g,
onFocus: S
}), null, 16, Da),
P(U, {
ref_key: "inputBtnRef",
ref: C,
class: A([{
"oc-file-input-danger": !!V.errorMessage
}, "oc-file-input-button oc-text-input-btn oc-pr-s"]),
disabled: V.disabled,
"color-role": "secondary",
appearance: "outline",
onClick: x
}, {
default: T(() => [
J(O(V.$ngettext("Select file", "Select files", V.multiple ? 2 : 1)), 1)
]),
_: 1
}, 8, ["class", "disabled"]),
v("div", Ba, [
y.value ? (l(), u("div", La, [
J(O(y.value) + " ", 1),
V.clearButtonEnabled && y.value ? (l(), $(U, {
key: 0,
appearance: "raw",
class: "oc-file-input-clear raw-hover-surface oc-p-xs oc-ml-xs",
"aria-label": V.$gettext("Clear input"),
onClick: L
}, {
default: T(() => [
P(q, {
name: "close",
size: "small"
})
]),
_: 1
}, 8, ["aria-label"])) : w("", !0)
])) : w("", !0)
])
]),
n.value ? (l(), u("div", {
key: 0,
class: A(["oc-file-input-message oc-text-small oc-flex oc-flex-middle", {
"oc-file-input-description": !!V.descriptionMessage,
"oc-file-input-danger": !!V.errorMessage
}])
}, [
V.errorMessage ? (l(), $(q, {
key: 0,
name: "error-warning",
size: "small",
class: "oc-mr-xs",
"fill-type": "line",
"aria-hidden": "true"
})) : w("", !0),
v("span", {
id: s.value,
class: A({
"oc-file-input-description": !!V.descriptionMessage,
"oc-file-input-danger": !!V.errorMessage
}),
textContent: O(r.value)
}, null, 10, xa)
], 2)) : w("", !0)
], 2));
}
}), Pa = (e, t) => {
const a = e.__vccOpts || e;
for (const [n, s] of t)
a[n] = s;
return a;
}, Aa = /* @__PURE__ */ Pa(Va, [["__scopeId", "data-v-3d9c1e35"]]), za = ["textContent"], Ia = ["textContent"], Ea = /* @__PURE__ */ B({
__name: "OcFilterChip",
props: {
filterLabel: {},
closeOnClick: { type: Boolean, default: !1 },
id: { default: () => Z("oc-filter-chip-") },
isToggle: { type: Boolean, default: !1 },
isToggleActive: { type: Boolean, default: !1 },
raw: { type: Boolean, default: !1 },
selectedItemNames: { default: () => [] }
},
emits: ["clearFilter", "hideDrop", "showDrop", "toggleFilter"],
setup(e, { expose: t, emit: a }) {
const n = a, s = ue("dropRef"), o = p(() => e.isToggle ? e.isToggleActive : !!e.selectedItemNames.length);
return t({ hideDrop: () => {
var c;
(c = d(s)) == null || c.hide();
} }), (c, r) => {
const i = Y("oc-icon"), C = Y("oc-button"), y = he("oc-tooltip");
return l(), u("div", {
class: A(["oc-filter-chip oc-flex", { "oc-filter-chip-toggle": c.isToggle, "oc-filter-chip-raw": c.raw }])
}, [
P(C, {
id: c.id,
class: A(["oc-filter-chip-button oc-pill", { "oc-filter-chip-button-selected": o.value }]),
appearance: "raw-inverse",
"color-role": "surface",
onClick: r[0] || (r[0] = (x) => c.isToggle ? n("toggleFilter") : !1)
}, {
default: T(() => [
P(i, {
class: A(o.value ? "oc-filter-check-icon-active" : "oc-filter-check-icon-inactive"),
name: "check",
size: "small"
}, null, 8, ["class"]),
v("span", {
class: "oc-text-truncate oc-filter-chip-label",
textContent: O(c.selectedItemNames.length ? c.selectedItemNames[0] : c.filterLabel)
}, null, 8, za),
c.selectedItemNames.length > 1 ? (l(), u("span", {
key: 0,
textContent: O(` +${c.selectedItemNames.length - 1}`)
}, null, 8, Ia)) : w("", !0),
!o.value && !c.isToggle ? (l(), $(i, {
key: 1,
name: "arrow-down-s",
size: "small"
})) : w("", !0)
]),
_: 1
}, 8, ["id", "class"]),
c.isToggle ? w("", !0) : (l(), $(Se, {
key: 0,
ref_key: "dropRef",
ref: s,
toggle: "#" + c.id,
class: "oc-filter-chip-drop",
mode: "click",
"padding-size": "small",
"close-on-click": c.closeOnClick,
onHideDrop: r[1] || (r[1] = (x) => n("hideDrop")),
onShowDrop: r[2] || (r[2] = (x) => n("showDrop"))
}, {
default: T(() => [
F(c.$slots, "default")
]),
_: 3
}, 8, ["toggle", "close-on-click"])),
o.value ? Q((l(), $(C, {
key: 1,
class: "oc-filter-chip-clear oc-px-xs",
appearance: "raw",
"aria-label": c.$gettext("Clear filter"),
onClick: r[3] || (r[3] = (x) => n("clearFilter"))
}, {
default: T(() => [
P(i, {
name: "close",
size: "small"
})
]),
_: 1
}, 8, ["aria-label"])), [
[y, c.$gettext("Clear filter")]
]) : w("", !0)
], 2);
};
}
}), et = /* @__PURE__ */ B({
__name: "OcGrid",
props: {
direction: { default: "row" },
gutter: { default: "collapse" }
},
setup(e) {
const t = p(() => {
const a = [];
return a.push("oc-grid-" + e.gutter), e.direction === "column" && (a.push("oc-flex"), a.push("oc-flex-middle")), a;
});
return (a, n) => (l(), u("div", {
class: A(t.value)
}, [
F(a.$slots, "default")
], 2));
}
}), Fa = ["id", "aria-live", "textContent"], Ra = /* @__PURE__ */ B({
__name: "OcHiddenAnnouncer",
props: {
announcement: {},
level: { default: "polite" }
},
setup(e) {
const t = p(
() => Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)
);
return (a, n) => (l(), u("span", {
id: t.value,
class: "oc-invisible-sr oc-hidden-announcer",
"aria-live": a.level,
"aria-atomic": "true",
textContent: O(a.announcement)
}, null, 8, Fa));
}
}), Ha = /* @__PURE__ */ B({
__name: "OcList",
props: {
raw: { type: Boolean, default: !1 }
},
setup(e) {
return (t, a) => (l(), u("ul", {
class: A(["oc-list oc-my-rm oc-mx-rm", { "oc-list-raw": t.raw }])
}, [
F(t.$slots, "default")
], 2));
}
}), Na = ["aria-label"], ja = /* @__PURE__ */ B({
__name: "OcLoader",
props: {
ariaLabel: { default: "Loading" },
flat: { type: Boolean, default: !1 }
},
setup(e) {
return (t, a) => (l(), u("div", {
class: A(["oc-loader", { "oc-loader-flat": t.flat }]),
"aria-label": t.ariaLabel
}, null, 10, Na));
}
}), qa = ["type", "disabled"], Ka = { class: "oc-flex oc-text-small oc-text-input-password-policy-rule-wrapper oc-pt-s" }, Ua = ["textContent"], Ee = "file-copy", Ga = /* @__PURE__ */ B({
__name: "OcTextInputPassword",
props: {
disabled: { type: Boolean, default: !1 },
generatePasswordMethod: { type: Function },
hasError: { type: Boolean, default: !1 },
passwordPolicy: {},
value: { default: "" }
},
emits: [
"passwordChallengeCompleted",
"passwordChallengeFailed",
"passwordGenerated"
],
setup(e, { expose: t, emit: a }) {
const n = a, s = K(null), { $gettext: o } = ne(), h =