sit-onyx 1.0.0-alpha.69 → 1.0.0-alpha.71
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/OnyxCheckboxGroup/OnyxCheckboxGroup.vue.d.ts +3 -3
- package/dist/components/OnyxRadioButton/OnyxRadioButton.vue.d.ts +3 -3
- package/dist/components/OnyxRadioButtonGroup/OnyxRadioButtonGroup.vue.d.ts +3 -3
- package/dist/components/OnyxSelect/OnyxSelect.vue.d.ts +3 -3
- package/dist/composables/density.d.ts +4 -4
- package/dist/index.cjs +1 -1
- package/dist/index.js +27 -27
- package/dist/playwright/screenshots.d.ts +33 -0
- package/dist/style.css +1 -1
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
declare const _default: <TValue extends string | number | boolean>(__VLS_props: {
|
|
2
|
-
density?: "default" | "
|
|
2
|
+
density?: "default" | "compact" | "cozy" | undefined;
|
|
3
3
|
disabled?: boolean | undefined;
|
|
4
4
|
skeleton?: number | undefined;
|
|
5
5
|
modelValue?: TValue[] | undefined;
|
|
@@ -15,7 +15,7 @@ declare const _default: <TValue extends string | number | boolean>(__VLS_props:
|
|
|
15
15
|
emit: (evt: "update:modelValue", value: TValue[]) => void;
|
|
16
16
|
} | undefined, __VLS_expose?: ((exposed: import('vue').ShallowUnwrapRef<{}>) => void) | undefined, __VLS_setup?: Promise<{
|
|
17
17
|
props: {
|
|
18
|
-
density?: "default" | "
|
|
18
|
+
density?: "default" | "compact" | "cozy" | undefined;
|
|
19
19
|
disabled?: boolean | undefined;
|
|
20
20
|
skeleton?: number | undefined;
|
|
21
21
|
modelValue?: TValue[] | undefined;
|
|
@@ -35,7 +35,7 @@ declare const _default: <TValue extends string | number | boolean>(__VLS_props:
|
|
|
35
35
|
}> & {
|
|
36
36
|
__ctx?: {
|
|
37
37
|
props: {
|
|
38
|
-
density?: "default" | "
|
|
38
|
+
density?: "default" | "compact" | "cozy" | undefined;
|
|
39
39
|
disabled?: boolean | undefined;
|
|
40
40
|
skeleton?: number | undefined;
|
|
41
41
|
modelValue?: TValue[] | undefined;
|
|
@@ -7,7 +7,7 @@ declare const _default: <TValue extends SelectionOptionValue = SelectionOptionVa
|
|
|
7
7
|
selected?: boolean | undefined;
|
|
8
8
|
value?: unknown;
|
|
9
9
|
id: TValue;
|
|
10
|
-
density?: "default" | "
|
|
10
|
+
density?: "default" | "compact" | "cozy" | undefined;
|
|
11
11
|
disabled?: boolean | undefined;
|
|
12
12
|
loading?: boolean | undefined;
|
|
13
13
|
skeleton?: boolean | undefined;
|
|
@@ -27,7 +27,7 @@ declare const _default: <TValue extends SelectionOptionValue = SelectionOptionVa
|
|
|
27
27
|
selected?: boolean | undefined;
|
|
28
28
|
value?: unknown;
|
|
29
29
|
id: TValue;
|
|
30
|
-
density?: "default" | "
|
|
30
|
+
density?: "default" | "compact" | "cozy" | undefined;
|
|
31
31
|
disabled?: boolean | undefined;
|
|
32
32
|
loading?: boolean | undefined;
|
|
33
33
|
skeleton?: boolean | undefined;
|
|
@@ -51,7 +51,7 @@ declare const _default: <TValue extends SelectionOptionValue = SelectionOptionVa
|
|
|
51
51
|
selected?: boolean | undefined;
|
|
52
52
|
value?: unknown;
|
|
53
53
|
id: TValue;
|
|
54
|
-
density?: "default" | "
|
|
54
|
+
density?: "default" | "compact" | "cozy" | undefined;
|
|
55
55
|
disabled?: boolean | undefined;
|
|
56
56
|
loading?: boolean | undefined;
|
|
57
57
|
skeleton?: boolean | undefined;
|
|
@@ -2,7 +2,7 @@ import { SelectionOption, SelectionOptionValue } from '../OnyxRadioButton/types'
|
|
|
2
2
|
|
|
3
3
|
declare const _default: <TValue extends SelectionOptionValue>(__VLS_props: {
|
|
4
4
|
required?: boolean | undefined;
|
|
5
|
-
density?: "default" | "
|
|
5
|
+
density?: "default" | "compact" | "cozy" | undefined;
|
|
6
6
|
disabled?: boolean | undefined;
|
|
7
7
|
skeleton?: number | undefined;
|
|
8
8
|
customError?: string | undefined;
|
|
@@ -21,7 +21,7 @@ declare const _default: <TValue extends SelectionOptionValue>(__VLS_props: {
|
|
|
21
21
|
} | undefined, __VLS_expose?: ((exposed: import('vue').ShallowUnwrapRef<{}>) => void) | undefined, __VLS_setup?: Promise<{
|
|
22
22
|
props: {
|
|
23
23
|
required?: boolean | undefined;
|
|
24
|
-
density?: "default" | "
|
|
24
|
+
density?: "default" | "compact" | "cozy" | undefined;
|
|
25
25
|
disabled?: boolean | undefined;
|
|
26
26
|
skeleton?: number | undefined;
|
|
27
27
|
customError?: string | undefined;
|
|
@@ -44,7 +44,7 @@ declare const _default: <TValue extends SelectionOptionValue>(__VLS_props: {
|
|
|
44
44
|
__ctx?: {
|
|
45
45
|
props: {
|
|
46
46
|
required?: boolean | undefined;
|
|
47
|
-
density?: "default" | "
|
|
47
|
+
density?: "default" | "compact" | "cozy" | undefined;
|
|
48
48
|
disabled?: boolean | undefined;
|
|
49
49
|
skeleton?: number | undefined;
|
|
50
50
|
customError?: string | undefined;
|
|
@@ -3,7 +3,7 @@ import { Multiple, SelectModelValue } from './types';
|
|
|
3
3
|
declare const _default: <TValue extends SelectModelValue<TMultiple>, TMultiple extends Multiple>(__VLS_props: {
|
|
4
4
|
required?: boolean | undefined;
|
|
5
5
|
label: string;
|
|
6
|
-
density?: "default" | "
|
|
6
|
+
density?: "default" | "compact" | "cozy" | undefined;
|
|
7
7
|
disabled?: boolean | undefined;
|
|
8
8
|
loading?: boolean | undefined;
|
|
9
9
|
skeleton?: boolean | undefined;
|
|
@@ -23,7 +23,7 @@ declare const _default: <TValue extends SelectModelValue<TMultiple>, TMultiple e
|
|
|
23
23
|
props: {
|
|
24
24
|
required?: boolean | undefined;
|
|
25
25
|
label: string;
|
|
26
|
-
density?: "default" | "
|
|
26
|
+
density?: "default" | "compact" | "cozy" | undefined;
|
|
27
27
|
disabled?: boolean | undefined;
|
|
28
28
|
loading?: boolean | undefined;
|
|
29
29
|
skeleton?: boolean | undefined;
|
|
@@ -47,7 +47,7 @@ declare const _default: <TValue extends SelectModelValue<TMultiple>, TMultiple e
|
|
|
47
47
|
props: {
|
|
48
48
|
required?: boolean | undefined;
|
|
49
49
|
label: string;
|
|
50
|
-
density?: "default" | "
|
|
50
|
+
density?: "default" | "compact" | "cozy" | undefined;
|
|
51
51
|
disabled?: boolean | undefined;
|
|
52
52
|
loading?: boolean | undefined;
|
|
53
53
|
skeleton?: boolean | undefined;
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
export declare const
|
|
2
|
-
export type
|
|
1
|
+
export declare const DENSITIES: readonly ["compact", "default", "cozy"];
|
|
2
|
+
export type Density = (typeof DENSITIES)[number];
|
|
3
3
|
export type DensityProp = {
|
|
4
4
|
/**
|
|
5
5
|
* Density defines the amount of vertical white space a component has and the height of the main (interactive) element of a component.
|
|
6
6
|
* @default undefined By default the parents setting is used, if none is defined on any parent `default` is the default.
|
|
7
7
|
*/
|
|
8
|
-
density?:
|
|
8
|
+
density?: Density;
|
|
9
9
|
};
|
|
10
10
|
export declare const useDensity: (props: DensityProp) => {
|
|
11
11
|
densityClass: import('vue').ComputedRef<{
|
|
12
|
-
[x: string]: "default" | "
|
|
12
|
+
[x: string]: "default" | "compact" | "cozy" | undefined;
|
|
13
13
|
}>;
|
|
14
14
|
};
|
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),M={key:0,class:"onyx-app__nav"},A={class:"onyx-app__page"},P={key:1,class:"onyx-app__page-overlay"},U={key:2,class:"onyx-app__app-overlay"},R=e.defineComponent({__name:"OnyxAppLayout",props:{navBarAlignment:{default:"top"}},setup(o){const n=o,t=e.useSlots();return(l,s)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["onyx-app",{"onyx-app--horizontal":n.navBarAlignment==="left"}])},[e.unref(t).navBar?(e.openBlock(),e.createElementBlock("nav",M,[e.renderSlot(l.$slots,"navBar")])):e.createCommentVNode("",!0),e.createElementVNode("div",A,[e.renderSlot(l.$slots,"default")]),e.unref(t).pageOverlay?(e.openBlock(),e.createElementBlock("div",P,[e.renderSlot(l.$slots,"pageOverlay")])):e.createCommentVNode("",!0),e.unref(t).appOverlay?(e.openBlock(),e.createElementBlock("div",U,[e.renderSlot(l.$slots,"appOverlay")])):e.createCommentVNode("",!0)],2))}}),F=["cozy","default","compact"],k=o=>({densityClass:e.computed(()=>({[`onyx-density-${o.density}`]:o.density}))}),H=["innerHTML"],v=e.defineComponent({__name:"OnyxIcon",props:{icon:{},size:{default:"24px"},color:{default:"currentColor"}},setup(o){const n=o;return(t,l)=>(e.openBlock(),e.createElementBlock("figure",{class:e.normalizeClass(["onyx-icon",[n.size!=="24px"?`onyx-icon--${n.size}`:"",n.color!=="currentColor"?`onyx-icon--${n.color}`:""]]),"aria-hidden":"true",innerHTML:n.icon},null,10,H))}}),E=(o,n)=>{const t=o.__vccOpts||o;for(const[l,s]of n)t[l]=s;return t},Y={},j={class:"onyx-circle-spinner",viewBox:"0 0 50 50"},X=e.createElementVNode("circle",{class:"onyx-circle-spinner__circle",cx:"50%",cy:"50%",r:"45%"},null,-1),Z=[X];function G(o,n){return e.openBlock(),e.createElementBlock("svg",j,Z)}const K=E(Y,[["render",G]]),W={},J={class:"onyx-loading-dots"},Q=e.createElementVNode("span",{class:"onyx-loading-dots__center"},null,-1),ee=[Q];function te(o,n){return e.openBlock(),e.createElementBlock("div",J,ee)}const oe=E(W,[["render",te]]),x=e.defineComponent({__name:"OnyxLoadingIndicator",props:{type:{default:"dots"}},setup(o){const n=o;return(t,l)=>n.type==="circle"?(e.openBlock(),e.createBlock(K,{key:0})):n.type==="dots"?(e.openBlock(),e.createBlock(oe,{key:1})):e.createCommentVNode("",!0)}}),ne={},le={"aria-hidden":"true",class:"onyx-skeleton"};function ae(o,n){return e.openBlock(),e.createElementBlock("figure",le)}const h=E(ne,[["render",ae]]),se=["disabled","type"],re={key:2,class:"onyx-button__label onyx-truncation-ellipsis"},ce=e.defineComponent({__name:"OnyxButton",props:{density:{},label:{},disabled:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},type:{default:"button"},variation:{default:"primary"},mode:{default:"default"},icon:{},skeleton:{type:Boolean,default:!1}},emits:["click"],setup(o,{emit:n}){const t=o,{densityClass:l}=k(t),s=n;return(r,i)=>t.skeleton?(e.openBlock(),e.createBlock(h,{key:0,class:e.normalizeClass(["onyx-button-skeleton",e.unref(l)])},null,8,["class"])):(e.openBlock(),e.createElementBlock("button",{key:1,class:e.normalizeClass(["onyx-button",`onyx-button--${t.variation}`,`onyx-button--${t.mode}`,{"onyx-button--loading":t.loading},e.unref(l)]),disabled:t.disabled||t.loading,type:t.type,onClick:i[0]||(i[0]=c=>s("click"))},[t.icon&&!t.loading?(e.openBlock(),e.createBlock(v,{key:0,icon:t.icon},null,8,["icon"])):e.createCommentVNode("",!0),t.loading?(e.openBlock(),e.createBlock(x,{key:1,class:"onyx-button__loading"})):(e.openBlock(),e.createElementBlock("span",re,e.toDisplayString(t.label),1))],10,se))}}),ie=["button","submit","reset"],de=["primary","secondary","danger"],ue=["default","outline","plain"],w=e.defineComponent({__name:"OnyxBadge",props:{density:{},variation:{default:"primary"},icon:{}},setup(o){const n=o,{densityClass:t}=k(n);return(l,s)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["onyx-badge",["onyx-truncation-ellipsis","onyx-text",`onyx-badge--${n.variation}`,e.unref(t)]])},[n.icon?(e.openBlock(),e.createBlock(v,{key:0,class:"onyx-badge__icon",icon:n.icon,size:n.density==="cozy"?"24px":"16px"},null,8,["icon","size"])):e.renderSlot(l.$slots,"default",{key:1})],2))}}),pe="(optional)",me={tooShort:"Please lengthen this text to {minLength} characters or more (you are currently using 1 character) | Please lengthen this text to {minLength} characters or more (you are currently using {n} characters)",tooLong:"Please shorten this text to {maxLength} characters or less (you are currently using 1 character) | Please shorten this text to {maxLength} characters or less (you are currently using {n} characters)",rangeUnderflow:"Value must be greater than or equal to {min}",rangeOverflow:"Value must be less than or equal to {max}",patternMismatch:"Please match the format requested.",valueMissing:"Please fill in this field.",stepMismatch:"Please enter a value that is a multiple of {step}.",badInput:'"{value}" does not match the expected type.',typeMismatch:{generic:'"{value}" does not match the expected type.',email:'"{value}" must be a valid email address.',number:'"{value}" must be a number.',tel:'"{value}" must be a valid phone number.',url:'"{value}" must a valid URL.'}},ye={selectAll:"Select all",currentSelection:"{n} selected"},fe="No data available",O={optional:pe,validations:me,selections:ye,empty:fe},T=Symbol(),L=o=>{const n=e.computed(()=>e.unref(o==null?void 0:o.locale)??"en-US"),t=e.computed(()=>o!=null&&o.messages&&n.value in o.messages?o.messages[n.value]:O),l=e.computed(()=>(s,r={})=>{let i=$(s,t.value)??$(s,O)??"";const c=typeof r.n=="number"?r.n:void 0;return i=ke(i,c),xe(i,r)});return{locale:n,t:l}},_e=(o,n)=>o.provide(T,L(n)),g=()=>e.inject(T,()=>L(),!0),$=(o,n)=>{const t=o.split(".").reduce((l,s)=>!l||typeof l=="string"?l:l[s],n);return t&&typeof t=="string"?t:void 0},ke=(o,n)=>{const t=o.split(" | ").map(s=>s.trim());if(t.length<=1)return o;let l=1;return n===0&&(l=0),n&&(n<=0||n>1)&&(l=2),t.length===2?l===1?t[0]:t[1]:t[l]},xe=(o,n)=>n?Object.entries(n).reduce((l,[s,r])=>r===void 0?l:l.replace(new RegExp(`{${s}}`,"gi"),r.toString()),o).replace(/\s?{.*}\s?/gi,""):o,b=o=>({requiredTypeClass:e.computed(()=>({[`onyx-use-${o.requiredMarker}`]:o.requiredMarker})),requiredMarkerClass:e.computed(()=>({"onyx-required-marker":o.required,"onyx-optional-marker":!o.required}))}),he=()=>Object.entries(Object.getOwnPropertyDescriptors(ValidityState.prototype)).filter(([o,n])=>n.enumerable).map(([o])=>o),ve=o=>he().reduce((n,t)=>(n[t]=o[t],n),{}),be=(o,n)=>{const t=Object.entries(o).filter(([s,r])=>r!==void 0),l=Object.entries(n).filter(([s,r])=>r!==void 0);return t.length!==l.length?!1:t.every(([s,r])=>r===n[s])},B=o=>{const n=e.ref(),t=e.ref(!1);return e.watch(()=>o.props.modelValue,()=>t.value=!0,{once:!0}),{vCustomValidity:{mounted:s=>{e.watchEffect(()=>s.setCustomValidity(o.props.customError??"")),e.watch([()=>o.props.customError,()=>o.props.modelValue,t],()=>{const r=ve(s.validity);!t.value||!n.value&&r.valid||n.value&&be(r,n.value)||(n.value=r,o.emit("validityChange",n.value))},{immediate:!0})}}}},ge={class:"onyx-checkbox__container"},Be=["aria-label","title","indeterminate","disabled","required"],C=e.defineComponent({__name:"OnyxCheckbox",props:{density:{},required:{type:Boolean,default:!1},requiredMarker:{},customError:{},modelValue:{type:Boolean,default:!1},label:{},indeterminate:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},hideLabel:{type:Boolean},truncation:{default:"ellipsis"},skeleton:{type:Boolean,default:!1}},emits:["update:modelValue","validityChange"],setup(o,{emit:n}){const t=o,l=n,s=e.computed({get:()=>t.modelValue,set:u=>l("update:modelValue",u)}),{requiredMarkerClass:r,requiredTypeClass:i}=b(t),{densityClass:c}=k(t),{vCustomValidity:p}=B({props:t,emit:l});return(u,d)=>t.skeleton?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["onyx-checkbox-skeleton",e.unref(c)])},[e.createVNode(h,{class:"onyx-checkbox-skeleton__input"}),t.hideLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(h,{key:0,class:"onyx-checkbox-skeleton__label"}))],2)):(e.openBlock(),e.createElementBlock("label",{key:1,class:e.normalizeClass(["onyx-checkbox",[e.unref(i),e.unref(c)]])},[e.createElementVNode("div",ge,[t.loading?(e.openBlock(),e.createBlock(e.unref(x),{key:0,class:"onyx-checkbox__loading",type:"circle"})):e.withDirectives((e.openBlock(),e.createElementBlock("input",{key:1,"onUpdate:modelValue":d[0]||(d[0]=y=>s.value=y),"aria-label":t.hideLabel?t.label:void 0,title:t.hideLabel?t.label:void 0,class:"onyx-checkbox__input",type:"checkbox",indeterminate:t.indeterminate,disabled:t.disabled,required:t.required},null,8,Be)),[[e.vModelCheckbox,s.value],[e.unref(p)]])]),t.hideLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createElementVNode("p",{class:e.normalizeClass(["onyx-checkbox__label",[`onyx-truncation-${t.truncation}`,t.truncation==="multiline"?e.unref(r):void 0]])},e.toDisplayString(t.label),3),t.truncation==="ellipsis"?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["onyx-checkbox__marker",[e.unref(r)]])},null,2)):e.createCommentVNode("",!0)],64))],2))}}),Ce=["disabled"],Ee={key:0,class:"onyx-checkbox-group__label"},Ve=e.defineComponent({__name:"OnyxCheckboxGroup",props:{density:{},options:{},modelValue:{default:()=>[]},headline:{},direction:{default:"vertical"},withCheckAll:{type:Boolean,default:!1},checkAllLabel:{},disabled:{type:Boolean,default:!1},skeleton:{}},emits:["update:modelValue"],setup(o,{emit:n}){const t=o,{densityClass:l}=k(t),s=n,{t:r}=g(),i=(d,y)=>{const a=y?[...t.modelValue,d]:t.modelValue.filter(m=>m!==d);s("update:modelValue",a)},c=e.computed(()=>t.options.filter(d=>!d.disabled&&!d.skeleton)),p=d=>{const y=d?c.value.map(({id:a})=>a):[];s("update:modelValue",y)},u=e.computed(()=>{const d=c.value.map(({id:a})=>a),y=t.modelValue.filter(a=>d.includes(a));return!d.length||!y.length?{modelValue:!1}:y.length===d.length?{modelValue:!0}:{indeterminate:!0,modelValue:!1}});return(d,y)=>(e.openBlock(),e.createElementBlock("fieldset",{class:e.normalizeClass(["onyx-checkbox-group",e.unref(l)]),disabled:t.disabled},[t.headline?(e.openBlock(),e.createElementBlock("legend",Ee,[e.createVNode(e.unref(V),{is:"h3"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.headline),1)]),_:1})])):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["onyx-checkbox-group__content",{"onyx-checkbox-group__content--horizontal":t.direction==="horizontal"}])},[t.skeleton===void 0?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[t.withCheckAll?(e.openBlock(),e.createBlock(C,e.mergeProps({key:0},u.value,{label:t.checkAllLabel||e.unref(r)("selections.selectAll"),"onUpdate:modelValue":p}),null,16,["label"])):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,a=>(e.openBlock(),e.createBlock(C,e.mergeProps({key:a.id.toString()},a,{"model-value":t.modelValue.includes(a.id),"onUpdate:modelValue":m=>i(a.id,m)}),null,16,["model-value","onUpdate:modelValue"]))),128))],64)):(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(t.skeleton,a=>(e.openBlock(),e.createBlock(C,{key:a,label:`Skeleton ${a}`,skeleton:""},null,8,["label"]))),128))],2)],10,Ce))}}),Se='<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="M25.899 6.1C23.166 3.367 19.583 2 16 2S8.834 3.367 6.101 6.1c-5.467 5.467-5.467 14.332 0 19.799C8.834 28.633 12.417 30 16 30s7.166-1.367 9.899-4.101c5.468-5.467 5.468-14.331 0-19.799m-1.414 18.385C22.219 26.752 19.205 28 16 28s-6.219-1.248-8.485-3.515C5.248 22.219 4 19.205 4 16s1.248-6.219 3.515-8.485C9.781 5.248 12.795 4 16 4s6.219 1.248 8.485 3.515S28 12.795 28 16s-1.248 6.219-3.515 8.485"/><path d="M20.814 9.771 16 14.586l-4.814-4.815-1.415 1.414L14.586 16l-4.815 4.814 1.415 1.415L16 17.414l4.814 4.815 1.415-1.415L17.414 16l4.815-4.815z"/></svg>',Oe={class:"onyx-empty"},$e={class:"onyx-empty__label onyx-text onyx-truncation-multiline"},I=e.defineComponent({__name:"OnyxEmpty",setup(o){return(n,t)=>(e.openBlock(),e.createElementBlock("div",Oe,[e.renderSlot(n.$slots,"icon",{},()=>[e.createVNode(v,{icon:e.unref(Se),size:"48px"},null,8,["icon"])]),e.createElementVNode("div",$e,[e.renderSlot(n.$slots,"default")])]))}}),V=e.defineComponent({__name:"OnyxHeadline",props:{is:{},monospace:{type:Boolean,default:!1}},setup(o){const n=o;return(t,l)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(n.is),{class:e.normalizeClass(["onyx-headline",`onyx-headline--${n.is}`,n.monospace?"onyx-headline--monospace":""])},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},8,["class"]))}}),Ne=["h1","h2","h3","h4","h5","h6"],we=["12px","16px","24px","32px","48px","64px","96px"],Te=["aria-label","title","disabled"],Le=e.defineComponent({__name:"OnyxIconButton",props:{density:{},label:{},disabled:{type:Boolean,default:!1},type:{default:"button"},variation:{default:"primary"},loading:{type:Boolean},icon:{}},emits:["click"],setup(o,{emit:n}){const t=o,{densityClass:l}=k(t),s=n;return(r,i)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(["onyx-icon-button",[`onyx-icon-button--${t.variation}`,{"onyx-icon-button--loading":t.loading},e.unref(l)]]),"aria-label":t.label,title:t.label,disabled:t.disabled||t.loading,onClick:i[0]||(i[0]=c=>s("click"))},[t.loading?(e.openBlock(),e.createBlock(x,{key:0,type:"circle"})):t.icon?(e.openBlock(),e.createBlock(v,{key:1,icon:t.icon},null,8,["icon"])):e.renderSlot(r.$slots,"default",{key:2})],10,Te))}}),Ie={class:"onyx-truncation-ellipsis"},ze={class:"onyx-input__wrapper"},qe=["placeholder","type","required","autocapitalize","autocomplete","autofocus","name","pattern","readonly","disabled","minlength","maxlength","aria-label","title"],De={key:0,class:"onyx-input__footer onyx-text--small"},Me={key:0,class:"onyx-truncation-ellipsis"},Ae={key:1,class:"onyx-input__counter"},Pe=e.defineComponent({__name:"OnyxInput",props:{density:{},required:{type:Boolean,default:!1},requiredMarker:{},customError:{},label:{},modelValue:{default:""},type:{default:"text"},placeholder:{},autocapitalize:{default:"sentences"},autocomplete:{},autofocus:{type:Boolean},name:{},pattern:{},readonly:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},maxlength:{},minlength:{},withCounter:{type:Boolean},message:{},hideLabel:{type:Boolean}},emits:["update:modelValue","change","focus","blur","validityChange"],setup(o,{emit:n}){const t=o,l=n,{vCustomValidity:s}=B({props:t,emit:l}),{requiredMarkerClass:r,requiredTypeClass:i}=b(t),{densityClass:c}=k(t),p=e.computed({get:()=>t.modelValue,set:a=>l("update:modelValue",a)}),u=a=>{const m=a.target.value;l("change",m)},d=e.computed(()=>t.pattern instanceof RegExp?t.pattern.source:t.pattern),y=e.computed(()=>t.withCounter&&t.maxlength);return(a,m)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["onyx-input",e.unref(i),e.unref(c)])},[e.createElementVNode("label",null,[t.hideLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["onyx-input__label","onyx-text--small",e.unref(r)])},[e.createElementVNode("div",Ie,e.toDisplayString(t.label),1)],2)),e.createElementVNode("div",ze,[t.loading?(e.openBlock(),e.createBlock(x,{key:0,class:"onyx-input__loading",type:"circle"})):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":m[0]||(m[0]=f=>p.value=f),class:"onyx-input__native",placeholder:t.placeholder,type:t.type,required:t.required,autocapitalize:t.autocapitalize,autocomplete:t.autocomplete,autofocus:t.autofocus,name:t.name,pattern:d.value,readonly:t.readonly,disabled:t.disabled||t.loading,minlength:t.minlength,maxlength:t.maxlength,"aria-label":t.hideLabel?t.label:void 0,title:t.hideLabel?t.label:void 0,onChange:u,onFocus:m[1]||(m[1]=f=>l("focus")),onBlur:m[2]||(m[2]=f=>l("blur"))},null,40,qe),[[e.vModelDynamic,p.value],[e.unref(s)]])])]),t.message||y.value?(e.openBlock(),e.createElementBlock("div",De,[t.message?(e.openBlock(),e.createElementBlock("span",Me,e.toDisplayString(t.message),1)):e.createCommentVNode("",!0),y.value?(e.openBlock(),e.createElementBlock("span",Ae,e.toDisplayString(p.value.length)+"/"+e.toDisplayString(t.maxlength),1)):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0)],2))}}),Ue=["email","password","search","tel","text","url"],Re=["none","sentences","words","characters"],Fe='<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="M12.2 10.55v2h5.836l-8.193 8.193 1.414 1.414 8.193-8.193V19.8h2v-9.25z"/></svg>',He=o=>/^http(s?):\/\//.test(o),Ye=["href","target","rel"],je=e.defineComponent({__name:"OnyxLink",props:{href:{},target:{default:"_self"},withExternalIcon:{type:[Boolean,String],default:"auto"}},emits:["click"],setup(o,{emit:n}){const t=o,l=n,s=e.computed(()=>t.withExternalIcon!=="auto"?t.withExternalIcon:He(t.href));return(r,i)=>(e.openBlock(),e.createElementBlock("a",{class:"onyx-link",href:t.href,target:t.target,rel:t.target==="_blank"?"noreferrer":void 0,onClick:i[0]||(i[0]=c=>l("click"))},[e.renderSlot(r.$slots,"default"),s.value?(e.openBlock(),e.createBlock(v,{key:0,class:"onyx-link__icon",icon:e.unref(Fe),size:"16px"},null,8,["icon"])):e.createCommentVNode("",!0)],8,Ye))}}),Xe=["_self","_blank","_parent","_top"],z=o=>o,Ze=(()=>{let o=1;return()=>o++})(),S=o=>`${o}-${Ze()}`,Ge=z(o=>{const n=e.computed(()=>e.unref(o.multiselect)??!1),t=new Map,l=c=>(t.has(c)||t.set(c,S("listbox-option")),t.get(c)),s=e.ref(!1);e.watchEffect(()=>{var p;if(o.activeOption.value==null||!s.value&&!o.controlled)return;const c=l(o.activeOption.value);(p=document.getElementById(c))==null||p.scrollIntoView({block:"nearest",inline:"nearest"})});const r=c=>{var p,u,d,y,a,m,f,_;switch(c.key){case" ":c.preventDefault(),o.activeOption.value!=null&&((p=o.onSelect)==null||p.call(o,o.activeOption.value));break;case"ArrowUp":if(c.preventDefault(),o.activeOption.value==null){(u=o.onActivateLast)==null||u.call(o);return}(d=o.onActivatePrevious)==null||d.call(o,o.activeOption.value);break;case"ArrowDown":if(c.preventDefault(),o.activeOption.value==null){(y=o.onActivateFirst)==null||y.call(o);return}(a=o.onActivateNext)==null||a.call(o,o.activeOption.value);break;case"Home":c.preventDefault(),(m=o.onActivateFirst)==null||m.call(o);break;case"End":c.preventDefault(),(f=o.onActivateLast)==null||f.call(o);break;default:(_=o.onTypeAhead)==null||_.call(o,c.key)}};return{elements:{listbox:e.computed(()=>o.controlled?{role:"listbox","aria-multiselectable":n.value,"aria-label":e.unref(o.label),tabindex:"-1"}:{role:"listbox","aria-multiselectable":n.value,"aria-label":e.unref(o.label),tabindex:"0","aria-activedescendant":o.activeOption.value!=null?l(o.activeOption.value):void 0,onFocus:()=>s.value=!0,onBlur:()=>s.value=!1,onKeydown:r}),group:e.computed(()=>c=>({role:"group","aria-label":c.label})),option:e.computed(()=>c=>{const p=c.selected??!1;return{id:l(c.value),role:"option","aria-label":c.label,"aria-checked":n.value?p:void 0,"aria-selected":n.value?void 0:p,"aria-disabled":c.disabled,onClick:()=>{var u;return(u=o.onSelect)==null?void 0:u.call(o,c.value)}}})},state:{isFocused:s},internals:{getOptionId:l}}}),Ke=z(o=>{const n=S("tooltip"),t=e.ref(!1);let l;const s=e.computed(()=>{const a=e.unref(o.open);return typeof a!="object"?200:a.debounce}),r=e.computed(()=>{const a=e.unref(o.open);return typeof a!="object"?a:a.type}),i=e.computed({get:()=>t.value,set:a=>{clearTimeout(l),l=setTimeout(()=>{t.value=a},s.value)}}),c=e.computed(()=>typeof r.value=="boolean"?r.value:i.value),p=()=>{t.value=!t.value},u=e.computed(()=>{if(r.value==="hover")return{onMouseover:()=>i.value=!0,onMouseout:()=>i.value=!1,onFocusin:()=>t.value=!0,onFocusout:()=>t.value=!1}}),d=a=>{a.key==="Escape"&&(t.value=!1)},y=a=>{var _;const m=(_=document.getElementById(n))==null?void 0:_.parentElement;if(!m||!(a.target instanceof Node))return;!m.contains(a.target)&&(t.value=!1)};return e.onBeforeMount(()=>{document.addEventListener("keydown",d),e.watchEffect(()=>{r.value==="click"?document.addEventListener("click",y):document.removeEventListener("click",y)})}),e.onBeforeUnmount(()=>{document.addEventListener("keydown",d),document.addEventListener("click",y)}),{elements:{trigger:e.computed(()=>({"aria-describedby":n,onClick:r.value==="click"?p:void 0,...u.value})),tooltip:e.computed(()=>({role:"tooltip",id:n,tabindex:"-1",...u.value}))},state:{isVisible:c}}}),q=o=>{const t=e.ref(!1),l=r=>{const i=r.target;if(!(i instanceof Element))return;const c=e.unref(o.offset)??0;t.value=Math.abs(i.scrollTop)+i.clientHeight>=i.scrollHeight-c-1};return{vScrollEnd:{mounted:r=>{e.watchEffect(()=>{var c;(((c=o.enabled)==null?void 0:c.value)??!0)&&!o.loading.value?r.addEventListener("scroll",l):r.removeEventListener("scroll",l)})}},isScrollEnd:t}},We={class:"onyx-truncation-ellipsis"},Je=e.defineComponent({__name:"OnyxListboxOption",props:{active:{type:Boolean}},setup(o){const n=o;return(t,l)=>(e.openBlock(),e.createElementBlock("li",{class:e.normalizeClass(["onyx-listbox-option",{"onyx-listbox-option--active":n.active}])},[e.createElementVNode("span",We,[e.renderSlot(t.$slots,"default")])],2))}}),Qe=["aria-busy"],et={key:0,class:"onyx-listbox__slot onyx-listbox__slot--loading"},tt={key:0,class:"onyx-listbox__slot"},ot={key:1,class:"onyx-listbox__slot"},nt={key:3,class:"onyx-listbox__message onyx-text--small"},lt=e.defineComponent({__name:"OnyxListbox",props:{label:{},options:{},message:{},modelValue:{},loading:{type:Boolean,default:!1},lazyLoading:{}},emits:["update:modelValue","lazyLoad"],setup(o,{emit:n}){const t=o,l=n,s=e.useSlots(),{t:r}=g(),i=e.ref();e.watch(()=>t.modelValue,a=>{i.value=a});const{elements:{listbox:c,option:p}}=Ge({label:e.computed(()=>t.label),selectedOption:e.computed(()=>t.modelValue),activeOption:i,onSelect:a=>{t.modelValue===a?l("update:modelValue",void 0):l("update:modelValue",a)},onActivateFirst:()=>{var a;return i.value=(a=t.options.at(0))==null?void 0:a.id},onActivateLast:()=>{var a;return i.value=(a=t.options.at(-1))==null?void 0:a.id},onActivateNext:a=>{const m=t.options.findIndex(f=>f.id===a);m<t.options.length-1&&(i.value=t.options[m+1].id)},onActivatePrevious:a=>{const m=t.options.findIndex(f=>f.id===a);m>0&&(i.value=t.options[m-1].id)},onTypeAhead:a=>{const m=t.options.find(f=>f.label.toLowerCase().trim().startsWith(a.toLowerCase()));m&&(i.value=m.id)}}),{vScrollEnd:u,isScrollEnd:d}=q({enabled:e.computed(()=>{var a;return((a=t.lazyLoading)==null?void 0:a.enabled)??!1}),loading:e.computed(()=>t.loading),offset:e.computed(()=>{var a;return(a=t.lazyLoading)==null?void 0:a.scrollOffset})});e.watchEffect(()=>{d.value&&l("lazyLoad")});const y=e.computed(()=>t.options.length===0);return(a,m)=>{var f;return e.openBlock(),e.createElementBlock("div",{class:"onyx-listbox","aria-busy":t.loading},[t.loading?(e.openBlock(),e.createElementBlock("div",et,[e.createVNode(x,{class:"onyx-listbox__loading"})])):y.value?e.renderSlot(a.$slots,"empty",{key:1,defaultMessage:e.unref(r)("empty")},()=>[e.createVNode(I,null,{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(r)("empty")),1)]),_:1})]):e.withDirectives((e.openBlock(),e.createElementBlock("ul",e.mergeProps({key:2},e.unref(c),{class:"onyx-listbox__options"}),[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,_=>(e.openBlock(),e.createBlock(Je,e.mergeProps({key:_.id.toString()},e.unref(p)({value:_.id,label:_.label,disabled:_.disabled,selected:_.id===t.modelValue}),{active:_.id===i.value}),{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(_.label),1)]),_:2},1040,["active"]))),128)),(f=t.lazyLoading)!=null&&f.loading?(e.openBlock(),e.createElementBlock("li",tt,[e.createVNode(x,{class:"onyx-listbox__loading"})])):e.createCommentVNode("",!0),e.unref(s).optionsEnd?(e.openBlock(),e.createElementBlock("li",ot,[e.renderSlot(a.$slots,"optionsEnd")])):e.createCommentVNode("",!0)],16)),[[e.unref(u)]]),t.message?(e.openBlock(),e.createElementBlock("span",nt,e.toDisplayString(t.message),1)):e.createCommentVNode("",!0)],8,Qe)}}}),at={key:0,class:"onyx-page__sidebar"},st={class:"onyx-page__main"},rt={key:1,class:"onyx-page__footer"},ct={key:2,class:"onyx-page__toasts"},it=e.defineComponent({__name:"OnyxPageLayout",props:{footerAsideSidebar:{type:Boolean},hideSidebar:{type:Boolean}},setup(o){const n=o,t=e.useSlots(),l=e.computed(()=>{let s="";return!t.footer&&t.sidebar&&(s="onyx-page--side-main"),t.footer&&(!t.sidebar||n.hideSidebar)&&(s="onyx-page--main-footer"),t.footer&&t.sidebar&&(n.footerAsideSidebar?s="onyx-page--side-main-footer-partial":s="onyx-page--side-main-footer-full"),s});return(s,r)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["onyx-page",l.value])},[e.unref(t).sidebar&&!n.hideSidebar?(e.openBlock(),e.createElementBlock("aside",at,[e.renderSlot(s.$slots,"sidebar")])):e.createCommentVNode("",!0),e.createElementVNode("main",st,[e.renderSlot(s.$slots,"default")]),e.unref(t).footer?(e.openBlock(),e.createElementBlock("footer",rt,[e.renderSlot(s.$slots,"footer")])):e.createCommentVNode("",!0),e.unref(t).toasts?(e.openBlock(),e.createElementBlock("div",ct,[e.renderSlot(s.$slots,"toasts")])):e.createCommentVNode("",!0)],2))}}),dt=["title"],ut=["required","name","value","checked","disabled"],N=e.defineComponent({__name:"OnyxRadioButton",props:{id:{},label:{},value:{},disabled:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},truncation:{default:"ellipsis"},skeleton:{type:Boolean},density:{},customError:{},name:{},selected:{type:Boolean,default:!1},required:{type:Boolean,default:!1}},emits:["change","validityChange"],setup(o,{emit:n}){const t=o,l=n,{vCustomValidity:s}=B({props:t,emit:l}),{densityClass:r}=k(t);return(i,c)=>t.skeleton?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["onyx-radio-button-skeleton",e.unref(r)])},[e.createVNode(h,{class:"onyx-radio-button-skeleton__input"}),e.createVNode(h,{class:"onyx-radio-button-skeleton__label"})],2)):(e.openBlock(),e.createElementBlock("label",{key:1,class:e.normalizeClass(["onyx-radio-button",e.unref(r)]),title:t.customError},[t.loading?(e.openBlock(),e.createBlock(e.unref(x),{key:0,class:"onyx-radio-button__loading",type:"circle"})):e.withDirectives((e.openBlock(),e.createElementBlock("input",{key:1,class:"onyx-radio-button__selector",type:"radio",required:t.required,name:t.name,value:t.id,checked:t.selected,disabled:t.disabled},null,8,ut)),[[e.unref(s)]]),e.createElementVNode("span",{class:e.normalizeClass(["onyx-radio-button__label",[`onyx-truncation-${t.truncation}`]])},e.toDisplayString(t.label),3)],10,dt))}}),pt=["disabled"],mt={key:0,class:"onyx-radio-button-group__headline"},yt=e.defineComponent({__name:"OnyxRadioButtonGroup",props:{density:{},required:{type:Boolean,default:!1},requiredMarker:{},customError:{},name:{default:()=>S("radio-button-group-name")},modelValue:{},headline:{default:""},disabled:{type:Boolean,default:!1},direction:{default:"vertical"},options:{},skeleton:{}},emits:["update:modelValue","validityChange"],setup(o,{emit:n}){const t=o,{densityClass:l}=k(t),{requiredMarkerClass:s,requiredTypeClass:r}=b(t),i=n,c=p=>i("update:modelValue",t.options.find(({id:u})=>p.target.value===u));return(p,u)=>(e.openBlock(),e.createElementBlock("fieldset",{class:e.normalizeClass(["onyx-radio-button-group",e.unref(l),e.unref(r)]),disabled:t.disabled,onChange:u[0]||(u[0]=d=>c(d))},[t.headline?(e.openBlock(),e.createElementBlock("legend",mt,[e.createVNode(V,{is:"h3",class:e.normalizeClass(e.unref(s))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.headline),1)]),_:1},8,["class"])])):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["onyx-radio-button-group__content",{"onyx-radio-button-group__content--horizontal":t.direction==="horizontal"}])},[t.skeleton===void 0?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(t.options,(d,y)=>{var a;return e.openBlock(),e.createBlock(N,e.mergeProps({key:d.id.toString()},d,{name:t.name,"custom-error":t.customError,selected:d.id===((a=t.modelValue)==null?void 0:a.id),required:t.required,onValidityChange:m=>y===0&&i("validityChange",m)}),null,16,["name","custom-error","selected","required","onValidityChange"])}),128)):(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(t.skeleton,d=>(e.openBlock(),e.createBlock(N,{id:`skeleton-${d}`,key:d,label:"Skeleton ${i}",name:t.name,skeleton:""},null,8,["id","name"]))),128))],2)],42,pt))}}),ft='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="m22.29 18.83 1.41 1.41-7.71 7.71-7.71-7.71 1.41-1.41 6.29 6.29 6.29-6.29ZM16 6.87l6.29 6.29 1.41-1.41-7.71-7.71-7.71 7.71 1.41 1.41 6.29-6.29Z"/></svg>',_t={class:"onyx-truncation-ellipsis"},kt={class:"onyx-select__wrapper"},xt=["placeholder","required","disabled","aria-label","title"],ht={key:0,class:"onyx-select__footer onyx-text--small onyx-truncation-ellipsis"},vt=e.defineComponent({__name:"OnyxSelect",props:{density:{},required:{type:Boolean},requiredMarker:{},modelValue:{},label:{},hideLabel:{type:Boolean,default:!1},disabled:{type:Boolean},skeleton:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},placeholder:{},multiple:{},message:{}},emits:["update:modelValue"],setup(o){const n=o,{t}=g(),l=e.computed(()=>{var u;if(n.multiple)return typeof n.multiple=="boolean"?"summary":((u=n.multiple)==null?void 0:u.textMode)??"summary"}),s=e.computed(()=>{if(n.modelValue&&l.value==="preview")return n.modelValue.length}),r=e.computed(()=>{if(Array.isArray(n.modelValue)){const u=n.modelValue.length;if(!u)return"";if(u===1)return n.modelValue[0];switch(l.value){case"preview":return n.modelValue.join(", ");case"summary":default:return t.value("selections.currentSelection",{n:u})}}return n.modelValue??""}),{requiredMarkerClass:i,requiredTypeClass:c}=b(n),{densityClass:p}=k(n);return(u,d)=>n.skeleton?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["onyx-select-skeleton",e.unref(p)])},[n.hideLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(e.unref(h),{key:0,class:"onyx-select-skeleton__label"})),e.createVNode(e.unref(h),{class:"onyx-select-skeleton__input"})],2)):(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(["onyx-select",e.unref(c),e.unref(p),n.readonly?"onyx-select--readonly":"onyx-select--editable"])},[e.createElementVNode("label",null,[n.hideLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["onyx-select__label","onyx-text--small",e.unref(i)])},[e.createElementVNode("div",_t,e.toDisplayString(n.label),1)],2)),e.createElementVNode("div",kt,[n.loading?(e.openBlock(),e.createBlock(x,{key:0,class:"onyx-select__loading",type:"circle"})):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":d[0]||(d[0]=y=>r.value=y),class:"onyx-select__input onyx-truncation-ellipsis",placeholder:n.placeholder,type:"text",role:"presentation",required:n.required,readonly:"",disabled:n.disabled||n.loading,"aria-label":n.hideLabel?n.label:void 0,title:n.hideLabel?n.label:void 0},null,8,xt),[[e.vModelText,r.value]]),s.value?(e.openBlock(),e.createBlock(e.unref(D),{key:1,text:r.value,position:"bottom"},{default:e.withCtx(()=>[e.createVNode(e.unref(w),{class:"onyx-select__badge",variation:"neutral"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(s.value),1)]),_:1})]),_:1},8,["text"])):e.createCommentVNode("",!0),e.createVNode(e.unref(v),{icon:e.unref(ft),class:"onyx-select__icon"},null,8,["icon"])])]),n.message?(e.openBlock(),e.createElementBlock("div",ht,e.toDisplayString(n.message),1)):e.createCommentVNode("",!0)],2))}}),bt=["summary","preview"],gt='<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="m21.311 10.793-8.293 8.293-3.291-3.292-1.415 1.415 4.706 4.705 9.707-9.707z"/></svg>',Bt='<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="m22.707 10.707-1.414-1.414L16 14.586l-5.293-5.293-1.414 1.414L14.586 16l-5.293 5.293 1.414 1.414L16 17.414l5.293 5.293 1.414-1.414L17.414 16z"/></svg>',Ct=["title"],Et=["aria-label","disabled","required"],Vt={class:"onyx-switch__container"},St={class:"onyx-switch__icon"},Ot=e.createElementVNode("div",{class:"onyx-switch__frame"},null,-1),$t=e.defineComponent({__name:"OnyxSwitch",props:{density:{},required:{type:Boolean},requiredMarker:{},customError:{},modelValue:{type:Boolean,default:!1},label:{},disabled:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},hideLabel:{type:Boolean},truncation:{default:"ellipsis"},skeleton:{type:Boolean,default:!1}},emits:["update:modelValue","validityChange"],setup(o,{emit:n}){const t=o,l=n,{requiredMarkerClass:s,requiredTypeClass:r}=b(t),{densityClass:i}=k(t),{vCustomValidity:c}=B({props:t,emit:l}),p=e.computed({get:()=>t.modelValue,set:u=>{l("update:modelValue",u)}});return(u,d)=>t.skeleton?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["onyx-switch-skeleton",e.unref(i)])},[e.createVNode(h,{class:"onyx-switch-skeleton__input"}),t.hideLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(h,{key:0,class:"onyx-switch-skeleton__label"}))],2)):(e.openBlock(),e.createElementBlock("label",{key:1,class:e.normalizeClass(["onyx-switch",[e.unref(r),e.unref(i)]]),title:t.hideLabel?t.label:void 0},[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":d[0]||(d[0]=y=>p.value=y),type:"checkbox",role:"switch",class:e.normalizeClass({"onyx-switch__input":!0,"onyx-switch__loading":t.loading}),"aria-label":t.hideLabel?t.label:void 0,disabled:t.disabled||t.loading,required:t.required},null,10,Et),[[e.vModelCheckbox,p.value],[e.unref(c)]]),e.createElementVNode("span",Vt,[e.createElementVNode("span",St,[t.loading?(e.openBlock(),e.createBlock(e.unref(x),{key:0,class:"onyx-switch__spinner",type:"circle"})):(e.openBlock(),e.createBlock(e.unref(v),{key:1,icon:p.value?e.unref(gt):e.unref(Bt),size:"24px"},null,8,["icon"]))]),Ot]),t.hideLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(["onyx-switch__label",[`onyx-truncation-${t.truncation}`,e.unref(s)]])},e.toDisplayString(t.label),3))],10,Ct))}}),Nt={class:"onyx-tooltip-wrapper"},D=e.defineComponent({__name:"OnyxTooltip",props:{text:{},icon:{},color:{default:"neutral"},position:{default:"top"},fitParent:{type:Boolean,default:!1},open:{type:[String,Boolean,Object],default:"hover"}},setup(o){const n=o,{elements:{trigger:t,tooltip:l},state:{isVisible:s}}=Ke({open:e.computed(()=>n.open)});return(r,i)=>(e.openBlock(),e.createElementBlock("div",Nt,[e.createElementVNode("div",e.mergeProps(e.unref(l),{class:["onyx-tooltip onyx-text--small onyx-truncation-multiline",{"onyx-tooltip--danger":n.color==="danger","onyx-tooltip--bottom":n.position==="bottom","onyx-tooltip--fit-parent":n.fitParent,"onyx-tooltip--hidden":!e.unref(s)}]}),[n.icon?(e.openBlock(),e.createBlock(v,{key:0,icon:n.icon,size:"16px"},null,8,["icon"])):e.createCommentVNode("",!0),e.renderSlot(r.$slots,"tooltip",{},()=>[e.createElementVNode("span",null,e.toDisplayString(n.text),1)])],16),e.createElementVNode("div",e.normalizeProps(e.guardReactiveProps(e.unref(t))),[e.renderSlot(r.$slots,"default")],16)]))}}),wt=["top","bottom"],Tt=["primary","secondary","neutral","danger","warning","success","info"],Lt=["small","default","large"],It=["ellipsis","multiline"],zt=["horizontal","vertical"],qt=o=>({install:n=>{_e(n,o.i18n);const t=n.runWithContext(()=>g());e.watchEffect(()=>Dt(t.t.value("optional")))}}),Dt=o=>globalThis.document.body.style.setProperty("--onyx-global-optional-text",o);exports.AUTOCAPITALIZE=Re;exports.BUTTON_MODES=ue;exports.BUTTON_TYPES=ie;exports.BUTTON_VARIATIONS=de;exports.DENSITY=F;exports.DIRECTIONS=zt;exports.HEADLINE_TYPES=Ne;exports.ICON_SIZES=we;exports.INPUT_TYPES=Ue;exports.LINK_TARGETS=Xe;exports.MULTISELECT_TEXT_MODE=bt;exports.ONYX_COLORS=Tt;exports.OnyxAppLayout=R;exports.OnyxBadge=w;exports.OnyxButton=ce;exports.OnyxCheckboxGroup=Ve;exports.OnyxEmpty=I;exports.OnyxHeadline=V;exports.OnyxIcon=v;exports.OnyxIconButton=Le;exports.OnyxInput=Pe;exports.OnyxLink=je;exports.OnyxListbox=lt;exports.OnyxLoadingIndicator=x;exports.OnyxPageLayout=it;exports.OnyxRadioButtonGroup=yt;exports.OnyxSelect=vt;exports.OnyxSkeleton=h;exports.OnyxSwitch=$t;exports.OnyxTooltip=D;exports.TEXT_SIZES=Lt;exports.TOOLTIP_POSITIONS=wt;exports.TRUNCATION_TYPES=It;exports.createOnyx=qt;exports.useDensity=k;exports.useScrollEnd=q;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),M={key:0,class:"onyx-app__nav"},A={class:"onyx-app__page"},P={key:1,class:"onyx-app__page-overlay"},U={key:2,class:"onyx-app__app-overlay"},R=e.defineComponent({__name:"OnyxAppLayout",props:{navBarAlignment:{default:"top"}},setup(o){const n=o,t=e.useSlots();return(l,s)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["onyx-app",{"onyx-app--horizontal":n.navBarAlignment==="left"}])},[e.unref(t).navBar?(e.openBlock(),e.createElementBlock("nav",M,[e.renderSlot(l.$slots,"navBar")])):e.createCommentVNode("",!0),e.createElementVNode("div",A,[e.renderSlot(l.$slots,"default")]),e.unref(t).pageOverlay?(e.openBlock(),e.createElementBlock("div",P,[e.renderSlot(l.$slots,"pageOverlay")])):e.createCommentVNode("",!0),e.unref(t).appOverlay?(e.openBlock(),e.createElementBlock("div",U,[e.renderSlot(l.$slots,"appOverlay")])):e.createCommentVNode("",!0)],2))}}),F=["compact","default","cozy"],k=o=>({densityClass:e.computed(()=>({[`onyx-density-${o.density}`]:o.density}))}),H=["innerHTML"],v=e.defineComponent({__name:"OnyxIcon",props:{icon:{},size:{default:"24px"},color:{default:"currentColor"}},setup(o){const n=o;return(t,l)=>(e.openBlock(),e.createElementBlock("figure",{class:e.normalizeClass(["onyx-icon",[n.size!=="24px"?`onyx-icon--${n.size}`:"",n.color!=="currentColor"?`onyx-icon--${n.color}`:""]]),"aria-hidden":"true",innerHTML:n.icon},null,10,H))}}),C=(o,n)=>{const t=o.__vccOpts||o;for(const[l,s]of n)t[l]=s;return t},j={},Y={class:"onyx-circle-spinner",viewBox:"0 0 50 50"},X=e.createElementVNode("circle",{class:"onyx-circle-spinner__circle",cx:"50%",cy:"50%",r:"45%"},null,-1),Z=[X];function G(o,n){return e.openBlock(),e.createElementBlock("svg",Y,Z)}const K=C(j,[["render",G]]),W={},J={class:"onyx-loading-dots"},Q=e.createElementVNode("span",{class:"onyx-loading-dots__center"},null,-1),ee=[Q];function te(o,n){return e.openBlock(),e.createElementBlock("div",J,ee)}const oe=C(W,[["render",te]]),x=e.defineComponent({__name:"OnyxLoadingIndicator",props:{type:{default:"dots"}},setup(o){const n=o;return(t,l)=>n.type==="circle"?(e.openBlock(),e.createBlock(K,{key:0})):n.type==="dots"?(e.openBlock(),e.createBlock(oe,{key:1})):e.createCommentVNode("",!0)}}),ne={},le={"aria-hidden":"true",class:"onyx-skeleton"};function ae(o,n){return e.openBlock(),e.createElementBlock("figure",le)}const h=C(ne,[["render",ae]]),se=["disabled","type"],re={key:2,class:"onyx-button__label onyx-truncation-ellipsis"},ce=e.defineComponent({__name:"OnyxButton",props:{density:{},label:{},disabled:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},type:{default:"button"},variation:{default:"primary"},mode:{default:"default"},icon:{},skeleton:{type:Boolean,default:!1}},emits:["click"],setup(o,{emit:n}){const t=o,{densityClass:l}=k(t),s=n;return(r,i)=>t.skeleton?(e.openBlock(),e.createBlock(h,{key:0,class:e.normalizeClass(["onyx-button-skeleton",e.unref(l)])},null,8,["class"])):(e.openBlock(),e.createElementBlock("button",{key:1,class:e.normalizeClass(["onyx-button",`onyx-button--${t.variation}`,`onyx-button--${t.mode}`,{"onyx-button--loading":t.loading},e.unref(l)]),disabled:t.disabled||t.loading,type:t.type,onClick:i[0]||(i[0]=c=>s("click"))},[t.icon&&!t.loading?(e.openBlock(),e.createBlock(v,{key:0,icon:t.icon},null,8,["icon"])):e.createCommentVNode("",!0),t.loading?(e.openBlock(),e.createBlock(x,{key:1,class:"onyx-button__loading"})):(e.openBlock(),e.createElementBlock("span",re,e.toDisplayString(t.label),1))],10,se))}}),ie=["button","submit","reset"],de=["primary","secondary","danger"],ue=["default","outline","plain"],w=e.defineComponent({__name:"OnyxBadge",props:{density:{},variation:{default:"primary"},icon:{}},setup(o){const n=o,{densityClass:t}=k(n);return(l,s)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["onyx-badge",["onyx-truncation-ellipsis","onyx-text",`onyx-badge--${n.variation}`,e.unref(t)]])},[n.icon?(e.openBlock(),e.createBlock(v,{key:0,class:"onyx-badge__icon",icon:n.icon,size:n.density==="cozy"?"24px":"16px"},null,8,["icon","size"])):e.renderSlot(l.$slots,"default",{key:1})],2))}}),pe="(optional)",me={tooShort:"Please lengthen this text to {minLength} characters or more (you are currently using 1 character) | Please lengthen this text to {minLength} characters or more (you are currently using {n} characters)",tooLong:"Please shorten this text to {maxLength} characters or less (you are currently using 1 character) | Please shorten this text to {maxLength} characters or less (you are currently using {n} characters)",rangeUnderflow:"Value must be greater than or equal to {min}",rangeOverflow:"Value must be less than or equal to {max}",patternMismatch:"Please match the format requested.",valueMissing:"Please fill in this field.",stepMismatch:"Please enter a value that is a multiple of {step}.",badInput:'"{value}" does not match the expected type.',typeMismatch:{generic:'"{value}" does not match the expected type.',email:'"{value}" must be a valid email address.',number:'"{value}" must be a number.',tel:'"{value}" must be a valid phone number.',url:'"{value}" must a valid URL.'}},ye={selectAll:"Select all",currentSelection:"{n} selected"},fe="No data available",O={optional:pe,validations:me,selections:ye,empty:fe},T=Symbol(),L=o=>{const n=e.computed(()=>e.unref(o==null?void 0:o.locale)??"en-US"),t=e.computed(()=>o!=null&&o.messages&&n.value in o.messages?o.messages[n.value]:O),l=e.computed(()=>(s,r={})=>{let i=$(s,t.value)??$(s,O)??"";const c=typeof r.n=="number"?r.n:void 0;return i=ke(i,c),xe(i,r)});return{locale:n,t:l}},_e=(o,n)=>o.provide(T,L(n)),g=()=>e.inject(T,()=>L(),!0),$=(o,n)=>{const t=o.split(".").reduce((l,s)=>!l||typeof l=="string"?l:l[s],n);return t&&typeof t=="string"?t:void 0},ke=(o,n)=>{const t=o.split(" | ").map(s=>s.trim());if(t.length<=1)return o;let l=1;return n===0&&(l=0),n&&(n<=0||n>1)&&(l=2),t.length===2?l===1?t[0]:t[1]:t[l]},xe=(o,n)=>n?Object.entries(n).reduce((l,[s,r])=>r===void 0?l:l.replace(new RegExp(`{${s}}`,"gi"),r.toString()),o).replace(/\s?{.*}\s?/gi,""):o,b=o=>({requiredTypeClass:e.computed(()=>({[`onyx-use-${o.requiredMarker}`]:o.requiredMarker})),requiredMarkerClass:e.computed(()=>({"onyx-required-marker":o.required,"onyx-optional-marker":!o.required}))}),he=()=>Object.entries(Object.getOwnPropertyDescriptors(ValidityState.prototype)).filter(([o,n])=>n.enumerable).map(([o])=>o),ve=o=>he().reduce((n,t)=>(n[t]=o[t],n),{}),be=(o,n)=>{const t=Object.entries(o).filter(([s,r])=>r!==void 0),l=Object.entries(n).filter(([s,r])=>r!==void 0);return t.length!==l.length?!1:t.every(([s,r])=>r===n[s])},B=o=>{const n=e.ref(),t=e.ref(!1);return e.watch(()=>o.props.modelValue,()=>t.value=!0,{once:!0}),{vCustomValidity:{mounted:s=>{e.watchEffect(()=>s.setCustomValidity(o.props.customError??"")),e.watch([()=>o.props.customError,()=>o.props.modelValue,t],()=>{const r=ve(s.validity);!t.value||!n.value&&r.valid||n.value&&be(r,n.value)||(n.value=r,o.emit("validityChange",n.value))},{immediate:!0})}}}},ge={class:"onyx-checkbox__container"},Be=["aria-label","title","indeterminate","disabled","required"],E=e.defineComponent({__name:"OnyxCheckbox",props:{density:{},required:{type:Boolean,default:!1},requiredMarker:{},customError:{},modelValue:{type:Boolean,default:!1},label:{},indeterminate:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},hideLabel:{type:Boolean},truncation:{default:"ellipsis"},skeleton:{type:Boolean,default:!1}},emits:["update:modelValue","validityChange"],setup(o,{emit:n}){const t=o,l=n,s=e.computed({get:()=>t.modelValue,set:u=>l("update:modelValue",u)}),{requiredMarkerClass:r,requiredTypeClass:i}=b(t),{densityClass:c}=k(t),{vCustomValidity:p}=B({props:t,emit:l});return(u,d)=>t.skeleton?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["onyx-checkbox-skeleton",e.unref(c)])},[e.createVNode(h,{class:"onyx-checkbox-skeleton__input"}),t.hideLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(h,{key:0,class:"onyx-checkbox-skeleton__label"}))],2)):(e.openBlock(),e.createElementBlock("label",{key:1,class:e.normalizeClass(["onyx-checkbox",[e.unref(i),e.unref(c)]])},[e.createElementVNode("div",ge,[t.loading?(e.openBlock(),e.createBlock(e.unref(x),{key:0,class:"onyx-checkbox__loading",type:"circle"})):e.withDirectives((e.openBlock(),e.createElementBlock("input",{key:1,"onUpdate:modelValue":d[0]||(d[0]=y=>s.value=y),"aria-label":t.hideLabel?t.label:void 0,title:t.hideLabel?t.label:void 0,class:"onyx-checkbox__input",type:"checkbox",indeterminate:t.indeterminate,disabled:t.disabled,required:t.required},null,8,Be)),[[e.vModelCheckbox,s.value],[e.unref(p)]])]),t.hideLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createElementVNode("p",{class:e.normalizeClass(["onyx-checkbox__label",[`onyx-truncation-${t.truncation}`,t.truncation==="multiline"?e.unref(r):void 0]])},e.toDisplayString(t.label),3),t.truncation==="ellipsis"?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["onyx-checkbox__marker",[e.unref(r)]])},null,2)):e.createCommentVNode("",!0)],64))],2))}}),Ee=["disabled"],Ce={key:0,class:"onyx-checkbox-group__label"},Ve=e.defineComponent({__name:"OnyxCheckboxGroup",props:{density:{},options:{},modelValue:{default:()=>[]},headline:{},direction:{default:"vertical"},withCheckAll:{type:Boolean,default:!1},checkAllLabel:{},disabled:{type:Boolean,default:!1},skeleton:{}},emits:["update:modelValue"],setup(o,{emit:n}){const t=o,{densityClass:l}=k(t),s=n,{t:r}=g(),i=(d,y)=>{const a=y?[...t.modelValue,d]:t.modelValue.filter(m=>m!==d);s("update:modelValue",a)},c=e.computed(()=>t.options.filter(d=>!d.disabled&&!d.skeleton)),p=d=>{const y=d?c.value.map(({id:a})=>a):[];s("update:modelValue",y)},u=e.computed(()=>{const d=c.value.map(({id:a})=>a),y=t.modelValue.filter(a=>d.includes(a));return!d.length||!y.length?{modelValue:!1}:y.length===d.length?{modelValue:!0}:{indeterminate:!0,modelValue:!1}});return(d,y)=>(e.openBlock(),e.createElementBlock("fieldset",{class:e.normalizeClass(["onyx-checkbox-group",e.unref(l)]),disabled:t.disabled},[t.headline?(e.openBlock(),e.createElementBlock("legend",Ce,[e.createVNode(e.unref(V),{is:"h3"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.headline),1)]),_:1})])):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["onyx-checkbox-group__content",{"onyx-checkbox-group__content--horizontal":t.direction==="horizontal"}])},[t.skeleton===void 0?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[t.withCheckAll?(e.openBlock(),e.createBlock(E,e.mergeProps({key:0},u.value,{label:t.checkAllLabel||e.unref(r)("selections.selectAll"),"onUpdate:modelValue":p}),null,16,["label"])):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,a=>(e.openBlock(),e.createBlock(E,e.mergeProps({key:a.id.toString()},a,{"model-value":t.modelValue.includes(a.id),"onUpdate:modelValue":m=>i(a.id,m)}),null,16,["model-value","onUpdate:modelValue"]))),128))],64)):(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(t.skeleton,a=>(e.openBlock(),e.createBlock(E,{key:a,label:`Skeleton ${a}`,skeleton:""},null,8,["label"]))),128))],2)],10,Ee))}}),Se='<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="M25.899 6.1C23.166 3.367 19.583 2 16 2S8.834 3.367 6.101 6.1c-5.467 5.467-5.467 14.332 0 19.799C8.834 28.633 12.417 30 16 30s7.166-1.367 9.899-4.101c5.468-5.467 5.468-14.331 0-19.799m-1.414 18.385C22.219 26.752 19.205 28 16 28s-6.219-1.248-8.485-3.515C5.248 22.219 4 19.205 4 16s1.248-6.219 3.515-8.485C9.781 5.248 12.795 4 16 4s6.219 1.248 8.485 3.515S28 12.795 28 16s-1.248 6.219-3.515 8.485"/><path d="M20.814 9.771 16 14.586l-4.814-4.815-1.415 1.414L14.586 16l-4.815 4.814 1.415 1.415L16 17.414l4.814 4.815 1.415-1.415L17.414 16l4.815-4.815z"/></svg>',Oe={class:"onyx-empty"},$e={class:"onyx-empty__label onyx-text onyx-truncation-multiline"},I=e.defineComponent({__name:"OnyxEmpty",setup(o){return(n,t)=>(e.openBlock(),e.createElementBlock("div",Oe,[e.renderSlot(n.$slots,"icon",{},()=>[e.createVNode(v,{icon:e.unref(Se),size:"48px"},null,8,["icon"])]),e.createElementVNode("div",$e,[e.renderSlot(n.$slots,"default")])]))}}),V=e.defineComponent({__name:"OnyxHeadline",props:{is:{},monospace:{type:Boolean,default:!1}},setup(o){const n=o;return(t,l)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(n.is),{class:e.normalizeClass(["onyx-headline",`onyx-headline--${n.is}`,n.monospace?"onyx-headline--monospace":""])},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},8,["class"]))}}),Ne=["h1","h2","h3","h4","h5","h6"],we=["12px","16px","24px","32px","48px","64px","96px"],Te=["aria-label","title","disabled"],Le=e.defineComponent({__name:"OnyxIconButton",props:{density:{},label:{},disabled:{type:Boolean,default:!1},type:{default:"button"},variation:{default:"primary"},loading:{type:Boolean},icon:{}},emits:["click"],setup(o,{emit:n}){const t=o,{densityClass:l}=k(t),s=n;return(r,i)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(["onyx-icon-button",[`onyx-icon-button--${t.variation}`,{"onyx-icon-button--loading":t.loading},e.unref(l)]]),"aria-label":t.label,title:t.label,disabled:t.disabled||t.loading,onClick:i[0]||(i[0]=c=>s("click"))},[t.loading?(e.openBlock(),e.createBlock(x,{key:0,type:"circle"})):t.icon?(e.openBlock(),e.createBlock(v,{key:1,icon:t.icon},null,8,["icon"])):e.renderSlot(r.$slots,"default",{key:2})],10,Te))}}),Ie={class:"onyx-truncation-ellipsis"},ze={class:"onyx-input__wrapper"},qe=["placeholder","type","required","autocapitalize","autocomplete","autofocus","name","pattern","readonly","disabled","minlength","maxlength","aria-label","title"],De={key:0,class:"onyx-input__footer onyx-text--small"},Me={key:0,class:"onyx-truncation-ellipsis"},Ae={key:1,class:"onyx-input__counter"},Pe=e.defineComponent({__name:"OnyxInput",props:{density:{},required:{type:Boolean,default:!1},requiredMarker:{},customError:{},label:{},modelValue:{default:""},type:{default:"text"},placeholder:{},autocapitalize:{default:"sentences"},autocomplete:{},autofocus:{type:Boolean},name:{},pattern:{},readonly:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},maxlength:{},minlength:{},withCounter:{type:Boolean},message:{},hideLabel:{type:Boolean}},emits:["update:modelValue","change","focus","blur","validityChange"],setup(o,{emit:n}){const t=o,l=n,{vCustomValidity:s}=B({props:t,emit:l}),{requiredMarkerClass:r,requiredTypeClass:i}=b(t),{densityClass:c}=k(t),p=e.computed({get:()=>t.modelValue,set:a=>l("update:modelValue",a)}),u=a=>{const m=a.target.value;l("change",m)},d=e.computed(()=>t.pattern instanceof RegExp?t.pattern.source:t.pattern),y=e.computed(()=>t.withCounter&&t.maxlength);return(a,m)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["onyx-input",e.unref(i),e.unref(c)])},[e.createElementVNode("label",null,[t.hideLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["onyx-input__label","onyx-text--small",e.unref(r)])},[e.createElementVNode("div",Ie,e.toDisplayString(t.label),1)],2)),e.createElementVNode("div",ze,[t.loading?(e.openBlock(),e.createBlock(x,{key:0,class:"onyx-input__loading",type:"circle"})):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":m[0]||(m[0]=f=>p.value=f),class:"onyx-input__native",placeholder:t.placeholder,type:t.type,required:t.required,autocapitalize:t.autocapitalize,autocomplete:t.autocomplete,autofocus:t.autofocus,name:t.name,pattern:d.value,readonly:t.readonly,disabled:t.disabled||t.loading,minlength:t.minlength,maxlength:t.maxlength,"aria-label":t.hideLabel?t.label:void 0,title:t.hideLabel?t.label:void 0,onChange:u,onFocus:m[1]||(m[1]=f=>l("focus")),onBlur:m[2]||(m[2]=f=>l("blur"))},null,40,qe),[[e.vModelDynamic,p.value],[e.unref(s)]])])]),t.message||y.value?(e.openBlock(),e.createElementBlock("div",De,[t.message?(e.openBlock(),e.createElementBlock("span",Me,e.toDisplayString(t.message),1)):e.createCommentVNode("",!0),y.value?(e.openBlock(),e.createElementBlock("span",Ae,e.toDisplayString(p.value.length)+"/"+e.toDisplayString(t.maxlength),1)):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0)],2))}}),Ue=["email","password","search","tel","text","url"],Re=["none","sentences","words","characters"],Fe='<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="M12.2 10.55v2h5.836l-8.193 8.193 1.414 1.414 8.193-8.193V19.8h2v-9.25z"/></svg>',He=o=>/^http(s?):\/\//.test(o),je=["href","target","rel"],Ye=e.defineComponent({__name:"OnyxLink",props:{href:{},target:{default:"_self"},withExternalIcon:{type:[Boolean,String],default:"auto"}},emits:["click"],setup(o,{emit:n}){const t=o,l=n,s=e.computed(()=>t.withExternalIcon!=="auto"?t.withExternalIcon:He(t.href));return(r,i)=>(e.openBlock(),e.createElementBlock("a",{class:"onyx-link",href:t.href,target:t.target,rel:t.target==="_blank"?"noreferrer":void 0,onClick:i[0]||(i[0]=c=>l("click"))},[e.renderSlot(r.$slots,"default"),s.value?(e.openBlock(),e.createBlock(v,{key:0,class:"onyx-link__icon",icon:e.unref(Fe),size:"16px"},null,8,["icon"])):e.createCommentVNode("",!0)],8,je))}}),Xe=["_self","_blank","_parent","_top"],z=o=>o,Ze=(()=>{let o=1;return()=>o++})(),S=o=>`${o}-${Ze()}`,Ge=z(o=>{const n=e.computed(()=>e.unref(o.multiselect)??!1),t=new Map,l=c=>(t.has(c)||t.set(c,S("listbox-option")),t.get(c)),s=e.ref(!1);e.watchEffect(()=>{var p;if(o.activeOption.value==null||!s.value&&!o.controlled)return;const c=l(o.activeOption.value);(p=document.getElementById(c))==null||p.scrollIntoView({block:"nearest",inline:"nearest"})});const r=c=>{var p,u,d,y,a,m,f,_;switch(c.key){case" ":c.preventDefault(),o.activeOption.value!=null&&((p=o.onSelect)==null||p.call(o,o.activeOption.value));break;case"ArrowUp":if(c.preventDefault(),o.activeOption.value==null){(u=o.onActivateLast)==null||u.call(o);return}(d=o.onActivatePrevious)==null||d.call(o,o.activeOption.value);break;case"ArrowDown":if(c.preventDefault(),o.activeOption.value==null){(y=o.onActivateFirst)==null||y.call(o);return}(a=o.onActivateNext)==null||a.call(o,o.activeOption.value);break;case"Home":c.preventDefault(),(m=o.onActivateFirst)==null||m.call(o);break;case"End":c.preventDefault(),(f=o.onActivateLast)==null||f.call(o);break;default:(_=o.onTypeAhead)==null||_.call(o,c.key)}};return{elements:{listbox:e.computed(()=>o.controlled?{role:"listbox","aria-multiselectable":n.value,"aria-label":e.unref(o.label),tabindex:"-1"}:{role:"listbox","aria-multiselectable":n.value,"aria-label":e.unref(o.label),tabindex:"0","aria-activedescendant":o.activeOption.value!=null?l(o.activeOption.value):void 0,onFocus:()=>s.value=!0,onBlur:()=>s.value=!1,onKeydown:r}),group:e.computed(()=>c=>({role:"group","aria-label":c.label})),option:e.computed(()=>c=>{const p=c.selected??!1;return{id:l(c.value),role:"option","aria-label":c.label,"aria-checked":n.value?p:void 0,"aria-selected":n.value?void 0:p,"aria-disabled":c.disabled,onClick:()=>{var u;return(u=o.onSelect)==null?void 0:u.call(o,c.value)}}})},state:{isFocused:s},internals:{getOptionId:l}}}),Ke=z(o=>{const n=S("tooltip"),t=e.ref(!1);let l;const s=e.computed(()=>{const a=e.unref(o.open);return typeof a!="object"?200:a.debounce}),r=e.computed(()=>{const a=e.unref(o.open);return typeof a!="object"?a:a.type}),i=e.computed({get:()=>t.value,set:a=>{clearTimeout(l),l=setTimeout(()=>{t.value=a},s.value)}}),c=e.computed(()=>typeof r.value=="boolean"?r.value:i.value),p=()=>{t.value=!t.value},u=e.computed(()=>{if(r.value==="hover")return{onMouseover:()=>i.value=!0,onMouseout:()=>i.value=!1,onFocusin:()=>t.value=!0,onFocusout:()=>t.value=!1}}),d=a=>{a.key==="Escape"&&(t.value=!1)},y=a=>{var _;const m=(_=document.getElementById(n))==null?void 0:_.parentElement;if(!m||!(a.target instanceof Node))return;!m.contains(a.target)&&(t.value=!1)};return e.onBeforeMount(()=>{document.addEventListener("keydown",d),e.watchEffect(()=>{r.value==="click"?document.addEventListener("click",y):document.removeEventListener("click",y)})}),e.onBeforeUnmount(()=>{document.addEventListener("keydown",d),document.addEventListener("click",y)}),{elements:{trigger:e.computed(()=>({"aria-describedby":n,onClick:r.value==="click"?p:void 0,...u.value})),tooltip:e.computed(()=>({role:"tooltip",id:n,tabindex:"-1",...u.value}))},state:{isVisible:c}}}),q=o=>{const t=e.ref(!1),l=r=>{const i=r.target;if(!(i instanceof Element))return;const c=e.unref(o.offset)??0;t.value=Math.abs(i.scrollTop)+i.clientHeight>=i.scrollHeight-c-1};return{vScrollEnd:{mounted:r=>{e.watchEffect(()=>{var c;(((c=o.enabled)==null?void 0:c.value)??!0)&&!o.loading.value?r.addEventListener("scroll",l):r.removeEventListener("scroll",l)})}},isScrollEnd:t}},We={class:"onyx-truncation-ellipsis"},Je=e.defineComponent({__name:"OnyxListboxOption",props:{active:{type:Boolean}},setup(o){const n=o;return(t,l)=>(e.openBlock(),e.createElementBlock("li",{class:e.normalizeClass(["onyx-listbox-option",{"onyx-listbox-option--active":n.active}])},[e.createElementVNode("span",We,[e.renderSlot(t.$slots,"default")])],2))}}),Qe=["aria-busy"],et={key:0,class:"onyx-listbox__slot onyx-listbox__slot--loading"},tt={key:0,class:"onyx-listbox__slot"},ot={key:1,class:"onyx-listbox__slot"},nt={key:3,class:"onyx-listbox__message onyx-text--small"},lt=e.defineComponent({__name:"OnyxListbox",props:{label:{},options:{},message:{},modelValue:{},loading:{type:Boolean,default:!1},lazyLoading:{}},emits:["update:modelValue","lazyLoad"],setup(o,{emit:n}){const t=o,l=n,s=e.useSlots(),{t:r}=g(),i=e.ref();e.watch(()=>t.modelValue,a=>{i.value=a});const{elements:{listbox:c,option:p}}=Ge({label:e.computed(()=>t.label),selectedOption:e.computed(()=>t.modelValue),activeOption:i,onSelect:a=>{t.modelValue===a?l("update:modelValue",void 0):l("update:modelValue",a)},onActivateFirst:()=>{var a;return i.value=(a=t.options.at(0))==null?void 0:a.id},onActivateLast:()=>{var a;return i.value=(a=t.options.at(-1))==null?void 0:a.id},onActivateNext:a=>{const m=t.options.findIndex(f=>f.id===a);m<t.options.length-1&&(i.value=t.options[m+1].id)},onActivatePrevious:a=>{const m=t.options.findIndex(f=>f.id===a);m>0&&(i.value=t.options[m-1].id)},onTypeAhead:a=>{const m=t.options.find(f=>f.label.toLowerCase().trim().startsWith(a.toLowerCase()));m&&(i.value=m.id)}}),{vScrollEnd:u,isScrollEnd:d}=q({enabled:e.computed(()=>{var a;return((a=t.lazyLoading)==null?void 0:a.enabled)??!1}),loading:e.computed(()=>t.loading),offset:e.computed(()=>{var a;return(a=t.lazyLoading)==null?void 0:a.scrollOffset})});e.watchEffect(()=>{d.value&&l("lazyLoad")});const y=e.computed(()=>t.options.length===0);return(a,m)=>{var f;return e.openBlock(),e.createElementBlock("div",{class:"onyx-listbox","aria-busy":t.loading},[t.loading?(e.openBlock(),e.createElementBlock("div",et,[e.createVNode(x,{class:"onyx-listbox__loading"})])):y.value?e.renderSlot(a.$slots,"empty",{key:1,defaultMessage:e.unref(r)("empty")},()=>[e.createVNode(I,null,{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(r)("empty")),1)]),_:1})]):e.withDirectives((e.openBlock(),e.createElementBlock("ul",e.mergeProps({key:2},e.unref(c),{class:"onyx-listbox__options"}),[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,_=>(e.openBlock(),e.createBlock(Je,e.mergeProps({key:_.id.toString()},e.unref(p)({value:_.id,label:_.label,disabled:_.disabled,selected:_.id===t.modelValue}),{active:_.id===i.value}),{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(_.label),1)]),_:2},1040,["active"]))),128)),(f=t.lazyLoading)!=null&&f.loading?(e.openBlock(),e.createElementBlock("li",tt,[e.createVNode(x,{class:"onyx-listbox__loading"})])):e.createCommentVNode("",!0),e.unref(s).optionsEnd?(e.openBlock(),e.createElementBlock("li",ot,[e.renderSlot(a.$slots,"optionsEnd")])):e.createCommentVNode("",!0)],16)),[[e.unref(u)]]),t.message?(e.openBlock(),e.createElementBlock("span",nt,e.toDisplayString(t.message),1)):e.createCommentVNode("",!0)],8,Qe)}}}),at={key:0,class:"onyx-page__sidebar"},st={class:"onyx-page__main"},rt={key:1,class:"onyx-page__footer"},ct={key:2,class:"onyx-page__toasts"},it=e.defineComponent({__name:"OnyxPageLayout",props:{footerAsideSidebar:{type:Boolean},hideSidebar:{type:Boolean}},setup(o){const n=o,t=e.useSlots(),l=e.computed(()=>{let s="";return!t.footer&&t.sidebar&&(s="onyx-page--side-main"),t.footer&&(!t.sidebar||n.hideSidebar)&&(s="onyx-page--main-footer"),t.footer&&t.sidebar&&(n.footerAsideSidebar?s="onyx-page--side-main-footer-partial":s="onyx-page--side-main-footer-full"),s});return(s,r)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["onyx-page",l.value])},[e.unref(t).sidebar&&!n.hideSidebar?(e.openBlock(),e.createElementBlock("aside",at,[e.renderSlot(s.$slots,"sidebar")])):e.createCommentVNode("",!0),e.createElementVNode("main",st,[e.renderSlot(s.$slots,"default")]),e.unref(t).footer?(e.openBlock(),e.createElementBlock("footer",rt,[e.renderSlot(s.$slots,"footer")])):e.createCommentVNode("",!0),e.unref(t).toasts?(e.openBlock(),e.createElementBlock("div",ct,[e.renderSlot(s.$slots,"toasts")])):e.createCommentVNode("",!0)],2))}}),dt=["title"],ut=["required","name","value","checked","disabled"],N=e.defineComponent({__name:"OnyxRadioButton",props:{id:{},label:{},value:{},disabled:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},truncation:{default:"ellipsis"},skeleton:{type:Boolean},density:{},customError:{},name:{},selected:{type:Boolean,default:!1},required:{type:Boolean,default:!1}},emits:["change","validityChange"],setup(o,{emit:n}){const t=o,l=n,{vCustomValidity:s}=B({props:t,emit:l}),{densityClass:r}=k(t);return(i,c)=>t.skeleton?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["onyx-radio-button-skeleton",e.unref(r)])},[e.createVNode(h,{class:"onyx-radio-button-skeleton__input"}),e.createVNode(h,{class:"onyx-radio-button-skeleton__label"})],2)):(e.openBlock(),e.createElementBlock("label",{key:1,class:e.normalizeClass(["onyx-radio-button",e.unref(r)]),title:t.customError},[t.loading?(e.openBlock(),e.createBlock(e.unref(x),{key:0,class:"onyx-radio-button__loading",type:"circle"})):e.withDirectives((e.openBlock(),e.createElementBlock("input",{key:1,class:"onyx-radio-button__selector",type:"radio",required:t.required,name:t.name,value:t.id,checked:t.selected,disabled:t.disabled},null,8,ut)),[[e.unref(s)]]),e.createElementVNode("span",{class:e.normalizeClass(["onyx-radio-button__label",[`onyx-truncation-${t.truncation}`]])},e.toDisplayString(t.label),3)],10,dt))}}),pt=["disabled"],mt={key:0,class:"onyx-radio-button-group__headline"},yt=e.defineComponent({__name:"OnyxRadioButtonGroup",props:{density:{},required:{type:Boolean,default:!1},requiredMarker:{},customError:{},name:{default:()=>S("radio-button-group-name")},modelValue:{},headline:{default:""},disabled:{type:Boolean,default:!1},direction:{default:"vertical"},options:{},skeleton:{}},emits:["update:modelValue","validityChange"],setup(o,{emit:n}){const t=o,{densityClass:l}=k(t),{requiredMarkerClass:s,requiredTypeClass:r}=b(t),i=n,c=p=>i("update:modelValue",t.options.find(({id:u})=>p.target.value===u));return(p,u)=>(e.openBlock(),e.createElementBlock("fieldset",{class:e.normalizeClass(["onyx-radio-button-group",e.unref(l),e.unref(r)]),disabled:t.disabled,onChange:u[0]||(u[0]=d=>c(d))},[t.headline?(e.openBlock(),e.createElementBlock("legend",mt,[e.createVNode(V,{is:"h3",class:e.normalizeClass(e.unref(s))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.headline),1)]),_:1},8,["class"])])):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["onyx-radio-button-group__content",{"onyx-radio-button-group__content--horizontal":t.direction==="horizontal"}])},[t.skeleton===void 0?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(t.options,(d,y)=>{var a;return e.openBlock(),e.createBlock(N,e.mergeProps({key:d.id.toString()},d,{name:t.name,"custom-error":t.customError,selected:d.id===((a=t.modelValue)==null?void 0:a.id),required:t.required,onValidityChange:m=>y===0&&i("validityChange",m)}),null,16,["name","custom-error","selected","required","onValidityChange"])}),128)):(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(t.skeleton,d=>(e.openBlock(),e.createBlock(N,{id:`skeleton-${d}`,key:d,label:"Skeleton ${i}",name:t.name,skeleton:""},null,8,["id","name"]))),128))],2)],42,pt))}}),ft='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="m22.29 18.83 1.41 1.41-7.71 7.71-7.71-7.71 1.41-1.41 6.29 6.29 6.29-6.29ZM16 6.87l6.29 6.29 1.41-1.41-7.71-7.71-7.71 7.71 1.41 1.41 6.29-6.29Z"/></svg>',_t={class:"onyx-truncation-ellipsis"},kt={class:"onyx-select__wrapper"},xt=["placeholder","required","disabled","aria-label","title"],ht={key:0,class:"onyx-select__footer onyx-text--small onyx-truncation-ellipsis"},vt=e.defineComponent({__name:"OnyxSelect",props:{density:{},required:{type:Boolean},requiredMarker:{},modelValue:{},label:{},hideLabel:{type:Boolean,default:!1},disabled:{type:Boolean},skeleton:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},placeholder:{},multiple:{},message:{}},emits:["update:modelValue"],setup(o){const n=o,{t}=g(),l=e.computed(()=>{var u;if(n.multiple)return typeof n.multiple=="boolean"?"summary":((u=n.multiple)==null?void 0:u.textMode)??"summary"}),s=e.computed(()=>{if(n.modelValue&&l.value==="preview")return n.modelValue.length}),r=e.computed(()=>{if(Array.isArray(n.modelValue)){const u=n.modelValue.length;if(!u)return"";if(u===1)return n.modelValue[0];switch(l.value){case"preview":return n.modelValue.join(", ");case"summary":default:return t.value("selections.currentSelection",{n:u})}}return n.modelValue??""}),{requiredMarkerClass:i,requiredTypeClass:c}=b(n),{densityClass:p}=k(n);return(u,d)=>n.skeleton?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["onyx-select-skeleton",e.unref(p)])},[n.hideLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(e.unref(h),{key:0,class:"onyx-select-skeleton__label"})),e.createVNode(e.unref(h),{class:"onyx-select-skeleton__input"})],2)):(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(["onyx-select",e.unref(c),e.unref(p),n.readonly?"onyx-select--readonly":"onyx-select--editable"])},[e.createElementVNode("label",null,[n.hideLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["onyx-select__label","onyx-text--small",e.unref(i)])},[e.createElementVNode("div",_t,e.toDisplayString(n.label),1)],2)),e.createElementVNode("div",kt,[n.loading?(e.openBlock(),e.createBlock(x,{key:0,class:"onyx-select__loading",type:"circle"})):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":d[0]||(d[0]=y=>r.value=y),class:"onyx-select__input onyx-truncation-ellipsis",placeholder:n.placeholder,type:"text",role:"presentation",required:n.required,readonly:"",disabled:n.disabled||n.loading,"aria-label":n.hideLabel?n.label:void 0,title:n.hideLabel?n.label:void 0},null,8,xt),[[e.vModelText,r.value]]),s.value?(e.openBlock(),e.createBlock(e.unref(D),{key:1,text:r.value,position:"bottom"},{default:e.withCtx(()=>[e.createVNode(e.unref(w),{class:"onyx-select__badge",variation:"neutral"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(s.value),1)]),_:1})]),_:1},8,["text"])):e.createCommentVNode("",!0),e.createVNode(e.unref(v),{icon:e.unref(ft),class:"onyx-select__icon"},null,8,["icon"])])]),n.message?(e.openBlock(),e.createElementBlock("div",ht,e.toDisplayString(n.message),1)):e.createCommentVNode("",!0)],2))}}),bt=["summary","preview"],gt='<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="m21.311 10.793-8.293 8.293-3.291-3.292-1.415 1.415 4.706 4.705 9.707-9.707z"/></svg>',Bt='<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="m22.707 10.707-1.414-1.414L16 14.586l-5.293-5.293-1.414 1.414L14.586 16l-5.293 5.293 1.414 1.414L16 17.414l5.293 5.293 1.414-1.414L17.414 16z"/></svg>',Et=["title"],Ct=["aria-label","disabled","required"],Vt={class:"onyx-switch__container"},St={class:"onyx-switch__icon"},Ot=e.createElementVNode("div",{class:"onyx-switch__frame"},null,-1),$t=e.defineComponent({__name:"OnyxSwitch",props:{density:{},required:{type:Boolean},requiredMarker:{},customError:{},modelValue:{type:Boolean,default:!1},label:{},disabled:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},hideLabel:{type:Boolean},truncation:{default:"ellipsis"},skeleton:{type:Boolean,default:!1}},emits:["update:modelValue","validityChange"],setup(o,{emit:n}){const t=o,l=n,{requiredMarkerClass:s,requiredTypeClass:r}=b(t),{densityClass:i}=k(t),{vCustomValidity:c}=B({props:t,emit:l}),p=e.computed({get:()=>t.modelValue,set:u=>{l("update:modelValue",u)}});return(u,d)=>t.skeleton?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["onyx-switch-skeleton",e.unref(i)])},[e.createVNode(h,{class:"onyx-switch-skeleton__input"}),t.hideLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(h,{key:0,class:"onyx-switch-skeleton__label"}))],2)):(e.openBlock(),e.createElementBlock("label",{key:1,class:e.normalizeClass(["onyx-switch",[e.unref(r),e.unref(i)]]),title:t.hideLabel?t.label:void 0},[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":d[0]||(d[0]=y=>p.value=y),type:"checkbox",role:"switch",class:e.normalizeClass({"onyx-switch__input":!0,"onyx-switch__loading":t.loading}),"aria-label":t.hideLabel?t.label:void 0,disabled:t.disabled||t.loading,required:t.required},null,10,Ct),[[e.vModelCheckbox,p.value],[e.unref(c)]]),e.createElementVNode("span",Vt,[e.createElementVNode("span",St,[t.loading?(e.openBlock(),e.createBlock(e.unref(x),{key:0,class:"onyx-switch__spinner",type:"circle"})):(e.openBlock(),e.createBlock(e.unref(v),{key:1,icon:p.value?e.unref(gt):e.unref(Bt),size:"24px"},null,8,["icon"]))]),Ot]),t.hideLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(["onyx-switch__label",[`onyx-truncation-${t.truncation}`,e.unref(s)]])},e.toDisplayString(t.label),3))],10,Et))}}),Nt={class:"onyx-tooltip-wrapper"},D=e.defineComponent({__name:"OnyxTooltip",props:{text:{},icon:{},color:{default:"neutral"},position:{default:"top"},fitParent:{type:Boolean,default:!1},open:{type:[String,Boolean,Object],default:"hover"}},setup(o){const n=o,{elements:{trigger:t,tooltip:l},state:{isVisible:s}}=Ke({open:e.computed(()=>n.open)});return(r,i)=>(e.openBlock(),e.createElementBlock("div",Nt,[e.createElementVNode("div",e.mergeProps(e.unref(l),{class:["onyx-tooltip onyx-text--small onyx-truncation-multiline",{"onyx-tooltip--danger":n.color==="danger","onyx-tooltip--bottom":n.position==="bottom","onyx-tooltip--fit-parent":n.fitParent,"onyx-tooltip--hidden":!e.unref(s)}]}),[n.icon?(e.openBlock(),e.createBlock(v,{key:0,icon:n.icon,size:"16px"},null,8,["icon"])):e.createCommentVNode("",!0),e.renderSlot(r.$slots,"tooltip",{},()=>[e.createElementVNode("span",null,e.toDisplayString(n.text),1)])],16),e.createElementVNode("div",e.normalizeProps(e.guardReactiveProps(e.unref(t))),[e.renderSlot(r.$slots,"default")],16)]))}}),wt=["top","bottom"],Tt=["primary","secondary","neutral","danger","warning","success","info"],Lt=["small","default","large"],It=["ellipsis","multiline"],zt=["horizontal","vertical"],qt=o=>({install:n=>{_e(n,o.i18n);const t=n.runWithContext(()=>g());e.watchEffect(()=>Dt(t.t.value("optional")))}}),Dt=o=>globalThis.document.body.style.setProperty("--onyx-global-optional-text",o);exports.AUTOCAPITALIZE=Re;exports.BUTTON_MODES=ue;exports.BUTTON_TYPES=ie;exports.BUTTON_VARIATIONS=de;exports.DENSITIES=F;exports.DIRECTIONS=zt;exports.HEADLINE_TYPES=Ne;exports.ICON_SIZES=we;exports.INPUT_TYPES=Ue;exports.LINK_TARGETS=Xe;exports.MULTISELECT_TEXT_MODE=bt;exports.ONYX_COLORS=Tt;exports.OnyxAppLayout=R;exports.OnyxBadge=w;exports.OnyxButton=ce;exports.OnyxCheckboxGroup=Ve;exports.OnyxEmpty=I;exports.OnyxHeadline=V;exports.OnyxIcon=v;exports.OnyxIconButton=Le;exports.OnyxInput=Pe;exports.OnyxLink=Ye;exports.OnyxListbox=lt;exports.OnyxLoadingIndicator=x;exports.OnyxPageLayout=it;exports.OnyxRadioButtonGroup=yt;exports.OnyxSelect=vt;exports.OnyxSkeleton=h;exports.OnyxSwitch=$t;exports.OnyxTooltip=D;exports.TEXT_SIZES=Lt;exports.TOOLTIP_POSITIONS=wt;exports.TRUNCATION_TYPES=It;exports.createOnyx=qt;exports.useDensity=k;exports.useScrollEnd=q;
|
package/dist/index.js
CHANGED
|
@@ -32,7 +32,7 @@ const de = {
|
|
|
32
32
|
])) : m("", !0)
|
|
33
33
|
], 2));
|
|
34
34
|
}
|
|
35
|
-
}), Ht = ["
|
|
35
|
+
}), Ht = ["compact", "default", "cozy"], B = (t) => ({
|
|
36
36
|
densityClass: p(() => ({ [`onyx-density-${t.density}`]: t.density }))
|
|
37
37
|
}), _e = ["innerHTML"], S = /* @__PURE__ */ k({
|
|
38
38
|
__name: "OnyxIcon",
|
|
@@ -52,7 +52,7 @@ const de = {
|
|
|
52
52
|
innerHTML: l.icon
|
|
53
53
|
}, null, 10, _e));
|
|
54
54
|
}
|
|
55
|
-
}),
|
|
55
|
+
}), G = (t, l) => {
|
|
56
56
|
const e = t.__vccOpts || t;
|
|
57
57
|
for (const [a, i] of l)
|
|
58
58
|
e[a] = i;
|
|
@@ -71,13 +71,13 @@ const de = {
|
|
|
71
71
|
function he(t, l) {
|
|
72
72
|
return n(), c("svg", xe, ve);
|
|
73
73
|
}
|
|
74
|
-
const be = /* @__PURE__ */
|
|
74
|
+
const be = /* @__PURE__ */ G(me, [["render", he]]), ge = {}, ke = { class: "onyx-loading-dots" }, $e = /* @__PURE__ */ g("span", { class: "onyx-loading-dots__center" }, null, -1), Oe = [
|
|
75
75
|
$e
|
|
76
76
|
];
|
|
77
77
|
function Ce(t, l) {
|
|
78
78
|
return n(), c("div", ke, Oe);
|
|
79
79
|
}
|
|
80
|
-
const Ve = /* @__PURE__ */
|
|
80
|
+
const Ve = /* @__PURE__ */ G(ge, [["render", Ce]]), L = /* @__PURE__ */ k({
|
|
81
81
|
__name: "OnyxLoadingIndicator",
|
|
82
82
|
props: {
|
|
83
83
|
type: { default: "dots" }
|
|
@@ -93,7 +93,7 @@ const Ve = /* @__PURE__ */ Y(ge, [["render", Ce]]), L = /* @__PURE__ */ k({
|
|
|
93
93
|
function Le(t, l) {
|
|
94
94
|
return n(), c("figure", Be);
|
|
95
95
|
}
|
|
96
|
-
const E = /* @__PURE__ */
|
|
96
|
+
const E = /* @__PURE__ */ G(we, [["render", Le]]), Ee = ["disabled", "type"], Se = {
|
|
97
97
|
key: 2,
|
|
98
98
|
class: "onyx-button__label onyx-truncation-ellipsis"
|
|
99
99
|
}, jt = /* @__PURE__ */ k({
|
|
@@ -138,7 +138,7 @@ const E = /* @__PURE__ */ Y(we, [["render", Le]]), Ee = ["disabled", "type"], Se
|
|
|
138
138
|
})) : (n(), c("span", Se, O(e.label), 1))
|
|
139
139
|
], 10, Ee));
|
|
140
140
|
}
|
|
141
|
-
}), Ft = ["button", "submit", "reset"],
|
|
141
|
+
}), Ft = ["button", "submit", "reset"], Gt = ["primary", "secondary", "danger"], Kt = ["default", "outline", "plain"], Te = /* @__PURE__ */ k({
|
|
142
142
|
__name: "OnyxBadge",
|
|
143
143
|
props: {
|
|
144
144
|
density: {},
|
|
@@ -182,19 +182,19 @@ const E = /* @__PURE__ */ Y(we, [["render", Le]]), Ee = ["disabled", "type"], Se
|
|
|
182
182
|
}, Me = {
|
|
183
183
|
selectAll: "Select all",
|
|
184
184
|
currentSelection: "{n} selected"
|
|
185
|
-
}, Ae = "No data available",
|
|
185
|
+
}, Ae = "No data available", X = {
|
|
186
186
|
optional: Ie,
|
|
187
187
|
validations: qe,
|
|
188
188
|
selections: Me,
|
|
189
189
|
empty: Ae
|
|
190
190
|
}, J = Symbol(), Q = (t) => {
|
|
191
|
-
const l = p(() => o(t == null ? void 0 : t.locale) ?? "en-US"), e = p(() => t != null && t.messages && l.value in t.messages ? t.messages[l.value] :
|
|
192
|
-
let u =
|
|
191
|
+
const l = p(() => o(t == null ? void 0 : t.locale) ?? "en-US"), e = p(() => t != null && t.messages && l.value in t.messages ? t.messages[l.value] : X), a = p(() => (i, r = {}) => {
|
|
192
|
+
let u = Y(i, e.value) ?? Y(i, X) ?? "";
|
|
193
193
|
const d = typeof r.n == "number" ? r.n : void 0;
|
|
194
194
|
return u = Pe(u, d), Ne(u, r);
|
|
195
195
|
});
|
|
196
196
|
return { locale: l, t: a };
|
|
197
|
-
}, ze = (t, l) => t.provide(J, Q(l)), U = () => le(J, () => Q(), !0),
|
|
197
|
+
}, ze = (t, l) => t.provide(J, Q(l)), U = () => le(J, () => Q(), !0), Y = (t, l) => {
|
|
198
198
|
const e = t.split(".").reduce((a, i) => !a || typeof a == "string" ? a : a[i], l);
|
|
199
199
|
return e && typeof e == "string" ? e : void 0;
|
|
200
200
|
}, Pe = (t, l) => {
|
|
@@ -313,10 +313,10 @@ const E = /* @__PURE__ */ Y(we, [["render", Le]]), Ee = ["disabled", "type"], Se
|
|
|
313
313
|
], 64))
|
|
314
314
|
], 2));
|
|
315
315
|
}
|
|
316
|
-
}), Fe = ["disabled"],
|
|
316
|
+
}), Fe = ["disabled"], Ge = {
|
|
317
317
|
key: 0,
|
|
318
318
|
class: "onyx-checkbox-group__label"
|
|
319
|
-
},
|
|
319
|
+
}, Xt = /* @__PURE__ */ k({
|
|
320
320
|
__name: "OnyxCheckboxGroup",
|
|
321
321
|
props: {
|
|
322
322
|
density: {},
|
|
@@ -345,7 +345,7 @@ const E = /* @__PURE__ */ Y(we, [["render", Le]]), Ee = ["disabled", "type"], Se
|
|
|
345
345
|
class: v(["onyx-checkbox-group", o(a)]),
|
|
346
346
|
disabled: e.disabled
|
|
347
347
|
}, [
|
|
348
|
-
e.headline ? (n(), c("legend",
|
|
348
|
+
e.headline ? (n(), c("legend", Ge, [
|
|
349
349
|
w(o(ee), { is: "h3" }, {
|
|
350
350
|
default: I(() => [
|
|
351
351
|
P(O(e.headline), 1)
|
|
@@ -375,17 +375,17 @@ const E = /* @__PURE__ */ Y(we, [["render", Le]]), Ee = ["disabled", "type"], Se
|
|
|
375
375
|
], 2)
|
|
376
376
|
], 10, Fe));
|
|
377
377
|
}
|
|
378
|
-
}),
|
|
378
|
+
}), Ke = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="M25.899 6.1C23.166 3.367 19.583 2 16 2S8.834 3.367 6.101 6.1c-5.467 5.467-5.467 14.332 0 19.799C8.834 28.633 12.417 30 16 30s7.166-1.367 9.899-4.101c5.468-5.467 5.468-14.331 0-19.799m-1.414 18.385C22.219 26.752 19.205 28 16 28s-6.219-1.248-8.485-3.515C5.248 22.219 4 19.205 4 16s1.248-6.219 3.515-8.485C9.781 5.248 12.795 4 16 4s6.219 1.248 8.485 3.515S28 12.795 28 16s-1.248 6.219-3.515 8.485"/><path d="M20.814 9.771 16 14.586l-4.814-4.815-1.415 1.414L14.586 16l-4.815 4.814 1.415 1.415L16 17.414l4.814 4.815 1.415-1.415L17.414 16l4.815-4.815z"/></svg>', Xe = { class: "onyx-empty" }, Ye = { class: "onyx-empty__label onyx-text onyx-truncation-multiline" }, Ze = /* @__PURE__ */ k({
|
|
379
379
|
__name: "OnyxEmpty",
|
|
380
380
|
setup(t) {
|
|
381
|
-
return (l, e) => (n(), c("div",
|
|
381
|
+
return (l, e) => (n(), c("div", Xe, [
|
|
382
382
|
$(l.$slots, "icon", {}, () => [
|
|
383
383
|
w(S, {
|
|
384
|
-
icon: o(
|
|
384
|
+
icon: o(Ke),
|
|
385
385
|
size: "48px"
|
|
386
386
|
}, null, 8, ["icon"])
|
|
387
387
|
]),
|
|
388
|
-
g("div",
|
|
388
|
+
g("div", Ye, [
|
|
389
389
|
$(l.$slots, "default")
|
|
390
390
|
])
|
|
391
391
|
]));
|
|
@@ -411,7 +411,7 @@ const E = /* @__PURE__ */ Y(we, [["render", Le]]), Ee = ["disabled", "type"], Se
|
|
|
411
411
|
_: 3
|
|
412
412
|
}, 8, ["class"]));
|
|
413
413
|
}
|
|
414
|
-
}),
|
|
414
|
+
}), Yt = ["h1", "h2", "h3", "h4", "h5", "h6"], Zt = ["12px", "16px", "24px", "32px", "48px", "64px", "96px"], We = ["aria-label", "title", "disabled"], Wt = /* @__PURE__ */ k({
|
|
415
415
|
__name: "OnyxIconButton",
|
|
416
416
|
props: {
|
|
417
417
|
density: {},
|
|
@@ -565,9 +565,9 @@ const E = /* @__PURE__ */ Y(we, [["render", Le]]), Ee = ["disabled", "type"], Se
|
|
|
565
565
|
}), ll = ["_self", "_blank", "_parent", "_top"], te = (t) => t, it = /* @__PURE__ */ (() => {
|
|
566
566
|
let t = 1;
|
|
567
567
|
return () => t++;
|
|
568
|
-
})(),
|
|
568
|
+
})(), K = (t) => `${t}-${it()}`, rt = te(
|
|
569
569
|
(t) => {
|
|
570
|
-
const l = p(() => o(t.multiselect) ?? !1), e = /* @__PURE__ */ new Map(), a = (d) => (e.has(d) || e.set(d,
|
|
570
|
+
const l = p(() => o(t.multiselect) ?? !1), e = /* @__PURE__ */ new Map(), a = (d) => (e.has(d) || e.set(d, K("listbox-option")), e.get(d)), i = q(!1);
|
|
571
571
|
A(() => {
|
|
572
572
|
var x;
|
|
573
573
|
if (t.activeOption.value == null || !i.value && !t.controlled)
|
|
@@ -653,7 +653,7 @@ const E = /* @__PURE__ */ Y(we, [["render", Le]]), Ee = ["disabled", "type"], Se
|
|
|
653
653
|
};
|
|
654
654
|
}
|
|
655
655
|
), ct = te((t) => {
|
|
656
|
-
const l =
|
|
656
|
+
const l = K("tooltip"), e = q(!1);
|
|
657
657
|
let a;
|
|
658
658
|
const i = p(() => {
|
|
659
659
|
const s = o(t.open);
|
|
@@ -966,7 +966,7 @@ const E = /* @__PURE__ */ Y(we, [["render", Le]]), Ee = ["disabled", "type"], Se
|
|
|
966
966
|
required: { type: Boolean, default: !1 },
|
|
967
967
|
requiredMarker: {},
|
|
968
968
|
customError: {},
|
|
969
|
-
name: { default: () =>
|
|
969
|
+
name: { default: () => K("radio-button-group-name") },
|
|
970
970
|
modelValue: {},
|
|
971
971
|
headline: { default: "" },
|
|
972
972
|
disabled: { type: Boolean, default: !1 },
|
|
@@ -1261,12 +1261,12 @@ const E = /* @__PURE__ */ Y(we, [["render", Le]]), Ee = ["disabled", "type"], Se
|
|
|
1261
1261
|
}), Dt = (t) => globalThis.document.body.style.setProperty("--onyx-global-optional-text", t);
|
|
1262
1262
|
export {
|
|
1263
1263
|
el as AUTOCAPITALIZE,
|
|
1264
|
-
|
|
1264
|
+
Kt as BUTTON_MODES,
|
|
1265
1265
|
Ft as BUTTON_TYPES,
|
|
1266
|
-
|
|
1267
|
-
Ht as
|
|
1266
|
+
Gt as BUTTON_VARIATIONS,
|
|
1267
|
+
Ht as DENSITIES,
|
|
1268
1268
|
pl as DIRECTIONS,
|
|
1269
|
-
|
|
1269
|
+
Yt as HEADLINE_TYPES,
|
|
1270
1270
|
Zt as ICON_SIZES,
|
|
1271
1271
|
Qt as INPUT_TYPES,
|
|
1272
1272
|
ll as LINK_TARGETS,
|
|
@@ -1275,7 +1275,7 @@ export {
|
|
|
1275
1275
|
Rt as OnyxAppLayout,
|
|
1276
1276
|
Te as OnyxBadge,
|
|
1277
1277
|
jt as OnyxButton,
|
|
1278
|
-
|
|
1278
|
+
Xt as OnyxCheckboxGroup,
|
|
1279
1279
|
Ze as OnyxEmpty,
|
|
1280
1280
|
ee as OnyxHeadline,
|
|
1281
1281
|
S as OnyxIcon,
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { test } from '../playwright-axe';
|
|
2
|
+
import { JSX } from 'vue/jsx-runtime';
|
|
3
|
+
import { MountResultJsx } from '@playwright/experimental-ct-vue';
|
|
4
|
+
|
|
5
|
+
export type MatrixScreenshotTestOptions<TColumn extends string = string, TRow extends string = string> = {
|
|
6
|
+
/**
|
|
7
|
+
* Test name. Will be displayed above the matrix screenshot and be used as filename.
|
|
8
|
+
*/
|
|
9
|
+
name: string;
|
|
10
|
+
/**
|
|
11
|
+
* Matrix columns. Must not contain spaces.
|
|
12
|
+
*/
|
|
13
|
+
columns: readonly TColumn[];
|
|
14
|
+
/**
|
|
15
|
+
* Matrix rows. Must not contain spaces.
|
|
16
|
+
*/
|
|
17
|
+
rows: readonly TRow[];
|
|
18
|
+
/**
|
|
19
|
+
* Function that returns the component for the given column and row.
|
|
20
|
+
*/
|
|
21
|
+
component: (column: TColumn, row: TRow) => JSX.Element;
|
|
22
|
+
/**
|
|
23
|
+
* Optional callback to be executed before capturing the screenshot.
|
|
24
|
+
* Useful for performing `expect()` or e.g. hover, focus-visible state etc.
|
|
25
|
+
*/
|
|
26
|
+
beforeScreenshot?: (component: MountResultJsx, page: TestArgs["page"], column: TColumn, row: TRow) => Promise<void>;
|
|
27
|
+
};
|
|
28
|
+
type TestArgs = Parameters<Parameters<typeof test>[2]>[0];
|
|
29
|
+
/**
|
|
30
|
+
* Creates a single matrix screenshot that includes the screenshots for every column-row combination.
|
|
31
|
+
*/
|
|
32
|
+
export declare const executeMatrixScreenshotTest: <TColumn extends string, TRow extends string>(options: MatrixScreenshotTestOptions<TColumn, TRow>) => Promise<void>;
|
|
33
|
+
export {};
|