sit-onyx 1.0.0-alpha.53 → 1.0.0-alpha.55
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/OnyxCheckbox/OnyxCheckbox.stories.d.ts +1 -1
- package/dist/components/OnyxCheckbox/types.d.ts +1 -1
- package/dist/components/OnyxInput/types.d.ts +1 -1
- package/dist/components/OnyxListbox/OnyxListbox.stories.d.ts +1 -1
- package/dist/components/OnyxListbox/types.d.ts +1 -1
- package/dist/components/OnyxSwitch/OnyxSwitch.stories.d.ts +10 -0
- package/dist/components/OnyxSwitch/types.d.ts +1 -1
- package/dist/components/OnyxTooltip/OnyxTooltip.stories.d.ts +34 -6
- package/dist/components/OnyxTooltip/OnyxTooltip.vue.d.ts +18 -0
- package/dist/components/OnyxTooltip/types.d.ts +2 -1
- package/dist/index.cjs +1 -1
- package/dist/index.js +223 -217
- package/dist/style.css +1 -1
- package/package.json +2 -2
|
@@ -23,7 +23,7 @@ export type OnyxCheckboxProps = RequiredMarkerProp & {
|
|
|
23
23
|
*/
|
|
24
24
|
loading?: boolean;
|
|
25
25
|
/**
|
|
26
|
-
* If `true`, the label will be visually hidden.
|
|
26
|
+
* If `true`, the label will be visually hidden and the `title` attribute will be set.
|
|
27
27
|
* For accessibility / screen readers, the aria-label will still be set.
|
|
28
28
|
*/
|
|
29
29
|
hideLabel?: boolean;
|
|
@@ -80,7 +80,7 @@ export type OnyxInputProps = RequiredMarkerProp & {
|
|
|
80
80
|
*/
|
|
81
81
|
message?: string;
|
|
82
82
|
/**
|
|
83
|
-
* If `true`, the label will be visually hidden.
|
|
83
|
+
* If `true`, the label will be visually hidden and the `title` attribute will be set.
|
|
84
84
|
* For accessibility / screen readers, the aria-label will still be set.
|
|
85
85
|
*/
|
|
86
86
|
hideLabel?: boolean;
|
|
@@ -14,7 +14,7 @@ import OnyxListbox from "./OnyxListbox.vue";
|
|
|
14
14
|
* - **Home**: Focuses the first option
|
|
15
15
|
* - **End**: Focuses the last option
|
|
16
16
|
* - **Space**: Selects currently focused option
|
|
17
|
-
* - **Other
|
|
17
|
+
* - **Other characters**: Focuses first option that starts with the pressed key
|
|
18
18
|
*/
|
|
19
19
|
declare const meta: Meta<typeof OnyxListbox>;
|
|
20
20
|
export default meta;
|
|
@@ -14,7 +14,7 @@ export type OnyxListboxProps<TValue extends SelectionOptionValue = SelectionOpti
|
|
|
14
14
|
*/
|
|
15
15
|
modelValue?: TValue;
|
|
16
16
|
/**
|
|
17
|
-
* If true
|
|
17
|
+
* If `true`, the label will be visually hidden.
|
|
18
18
|
* For accessibility / screen readers, the aria-label will still be set.
|
|
19
19
|
*/
|
|
20
20
|
hideLabel?: boolean;
|
|
@@ -42,6 +42,16 @@ export declare const CheckedLoading: {
|
|
|
42
42
|
loading: true;
|
|
43
43
|
};
|
|
44
44
|
};
|
|
45
|
+
/**
|
|
46
|
+
* This example shows a switch without a visual label.
|
|
47
|
+
* For accessibility / screen readers it must still be passed.
|
|
48
|
+
*/
|
|
49
|
+
export declare const HiddenLabel: {
|
|
50
|
+
args: {
|
|
51
|
+
label: string;
|
|
52
|
+
hideLabel: true;
|
|
53
|
+
};
|
|
54
|
+
};
|
|
45
55
|
/**
|
|
46
56
|
* A switch with truncation. You can set the "truncation" property to choose between the different truncation types.
|
|
47
57
|
*/
|
|
@@ -22,7 +22,7 @@ export type OnyxSwitchProps = RequiredMarkerProp & {
|
|
|
22
22
|
*/
|
|
23
23
|
errorMessage?: string;
|
|
24
24
|
/**
|
|
25
|
-
* If `true`, the label will be visually hidden.
|
|
25
|
+
* If `true`, the label will be visually hidden and the `title` attribute will be set.
|
|
26
26
|
* For accessibility / screen readers, the aria-label will still be set.
|
|
27
27
|
*/
|
|
28
28
|
hideLabel?: boolean;
|
|
@@ -11,7 +11,9 @@ export default meta;
|
|
|
11
11
|
export declare const Default: {
|
|
12
12
|
args: {
|
|
13
13
|
text: string;
|
|
14
|
-
default: () =>
|
|
14
|
+
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
15
|
+
[key: string]: any;
|
|
16
|
+
}>;
|
|
15
17
|
icon: string;
|
|
16
18
|
open: true;
|
|
17
19
|
};
|
|
@@ -22,7 +24,9 @@ export declare const Default: {
|
|
|
22
24
|
*/
|
|
23
25
|
export declare const Hover: {
|
|
24
26
|
args: {
|
|
25
|
-
default: () =>
|
|
27
|
+
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
28
|
+
[key: string]: any;
|
|
29
|
+
}>;
|
|
26
30
|
open: "hover";
|
|
27
31
|
text: string;
|
|
28
32
|
icon: string;
|
|
@@ -33,7 +37,9 @@ export declare const Hover: {
|
|
|
33
37
|
*/
|
|
34
38
|
export declare const Click: {
|
|
35
39
|
args: {
|
|
36
|
-
default: () =>
|
|
40
|
+
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
41
|
+
[key: string]: any;
|
|
42
|
+
}>;
|
|
37
43
|
open: "click";
|
|
38
44
|
text: string;
|
|
39
45
|
icon: string;
|
|
@@ -45,7 +51,9 @@ export declare const Click: {
|
|
|
45
51
|
export declare const LongText: {
|
|
46
52
|
args: {
|
|
47
53
|
text: string;
|
|
48
|
-
default: () =>
|
|
54
|
+
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
55
|
+
[key: string]: any;
|
|
56
|
+
}>;
|
|
49
57
|
icon: string;
|
|
50
58
|
open: true;
|
|
51
59
|
};
|
|
@@ -57,7 +65,9 @@ export declare const MatchParentWidth: {
|
|
|
57
65
|
args: {
|
|
58
66
|
fitParent: true;
|
|
59
67
|
text: string;
|
|
60
|
-
default: () =>
|
|
68
|
+
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
69
|
+
[key: string]: any;
|
|
70
|
+
}>;
|
|
61
71
|
icon: string;
|
|
62
72
|
open: true;
|
|
63
73
|
};
|
|
@@ -69,7 +79,25 @@ export declare const Danger: {
|
|
|
69
79
|
args: {
|
|
70
80
|
color: "danger";
|
|
71
81
|
text: string;
|
|
72
|
-
default: () =>
|
|
82
|
+
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
83
|
+
[key: string]: any;
|
|
84
|
+
}>;
|
|
85
|
+
icon: string;
|
|
86
|
+
open: true;
|
|
87
|
+
};
|
|
88
|
+
};
|
|
89
|
+
/**
|
|
90
|
+
* This example shows a tooltip that uses the slot for custom content.
|
|
91
|
+
*/
|
|
92
|
+
export declare const CustomContent: {
|
|
93
|
+
args: {
|
|
94
|
+
tooltip: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
95
|
+
[key: string]: any;
|
|
96
|
+
}>;
|
|
97
|
+
text: string;
|
|
98
|
+
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
99
|
+
[key: string]: any;
|
|
100
|
+
}>;
|
|
73
101
|
icon: string;
|
|
74
102
|
open: true;
|
|
75
103
|
};
|
|
@@ -17,13 +17,31 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
17
17
|
}, {}>, Readonly<{
|
|
18
18
|
/**
|
|
19
19
|
* Default slot where the parent content is placed that should open/close the tooltip.
|
|
20
|
+
*
|
|
21
|
+
* **Accessibility**: Please ensure that your content includes at least one focusable element
|
|
22
|
+
* (e.g. by using a button or input element).
|
|
20
23
|
*/
|
|
21
24
|
default(props: Record<string, unknown>): unknown;
|
|
25
|
+
/**
|
|
26
|
+
* Optional slot to place custom content for the tooltip text.
|
|
27
|
+
*
|
|
28
|
+
* **Accessibility**: Make sure that the tooltip content is NOT focusable/interactive.
|
|
29
|
+
*/
|
|
30
|
+
tooltip?(props: Record<string, unknown>): unknown;
|
|
22
31
|
}> & {
|
|
23
32
|
/**
|
|
24
33
|
* Default slot where the parent content is placed that should open/close the tooltip.
|
|
34
|
+
*
|
|
35
|
+
* **Accessibility**: Please ensure that your content includes at least one focusable element
|
|
36
|
+
* (e.g. by using a button or input element).
|
|
25
37
|
*/
|
|
26
38
|
default(props: Record<string, unknown>): unknown;
|
|
39
|
+
/**
|
|
40
|
+
* Optional slot to place custom content for the tooltip text.
|
|
41
|
+
*
|
|
42
|
+
* **Accessibility**: Make sure that the tooltip content is NOT focusable/interactive.
|
|
43
|
+
*/
|
|
44
|
+
tooltip?(props: Record<string, unknown>): unknown;
|
|
27
45
|
}>;
|
|
28
46
|
export default _default;
|
|
29
47
|
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
@@ -3,8 +3,9 @@ import type { OnyxColor } from "../../types";
|
|
|
3
3
|
export type OnyxTooltipProps = {
|
|
4
4
|
/**
|
|
5
5
|
* Text to display inside the tooltip.
|
|
6
|
+
* Must be set unless the custom "tooltip" slot is used.
|
|
6
7
|
*/
|
|
7
|
-
text
|
|
8
|
+
text?: string;
|
|
8
9
|
/**
|
|
9
10
|
* Optional icon to show on the left of the text.
|
|
10
11
|
*/
|
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),P={key:0,class:"onyx-app__nav"},A={class:"onyx-app__page"},D={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,a)=>(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",P,[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",D,[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=["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,F))}}),B=(o,n)=>{const t=o.__vccOpts||o;for(const[l,a]of n)t[l]=a;return t},Y={},j={class:"onyx-circle-spinner",viewBox:"0 0 50 50"},G=e.createElementVNode("circle",{class:"onyx-circle-spinner__circle",cx:"50%",cy:"50%",r:"45%"},null,-1),H=[G];function K(o,n){return e.openBlock(),e.createElementBlock("svg",j,H)}const Z=B(Y,[["render",K]]),X={},W={class:"onyx-loading-dots"},J=e.createElementVNode("span",{class:"onyx-loading-dots__center"},null,-1),Q=[J];function ee(o,n){return e.openBlock(),e.createElementBlock("div",W,Q)}const te=B(X,[["render",ee]]),k=e.defineComponent({__name:"OnyxLoadingIndicator",props:{type:{default:"dots"}},setup(o){const n=o;return(t,l)=>n.type==="circle"?(e.openBlock(),e.createBlock(Z,{key:0})):n.type==="dots"?(e.openBlock(),e.createBlock(te,{key:1})):e.createCommentVNode("",!0)}}),oe={},ne={"aria-hidden":"true",class:"onyx-skeleton"};function le(o,n){return e.openBlock(),e.createElementBlock("figure",ne)}const _=B(oe,[["render",le]]),ae=["disabled"],re={key:2,class:"onyx-button__label onyx-truncation-ellipsis"},se=e.defineComponent({__name:"OnyxButton",props:{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,l=n;return(a,i)=>t.skeleton?(e.openBlock(),e.createBlock(_,{key:0,class:"onyx-button-skeleton"})):(e.openBlock(),e.createElementBlock("button",{key:1,class:e.normalizeClass(["onyx-button",{[`onyx-button--${t.variation}`]:!0,[`onyx-button--${t.mode}`]:!0,"onyx-button--loading":t.loading}]),disabled:t.disabled||t.loading,onClick:i[0]||(i[0]=c=>l("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(k,{key:1,class:"onyx-button__loading"})):(e.openBlock(),e.createElementBlock("span",re,e.toDisplayString(t.label),1))],10,ae))}}),ce=["button","submit","reset"],ie=["primary","secondary","danger"],ue=["default","outline","plain"],de="(optional)",pe={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.'}},me="Select all",b={optional:de,validations:pe,selectAll:me},w=Symbol(),T=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]:b),l=e.computed(()=>(a,i={})=>{let c=$(a,t.value)??$(a,b)??"";const r=typeof i.n=="number"?i.n:void 0;return c=fe(c,r),_e(c,i)});return{locale:n,t:l}},ye=(o,n)=>o.provide(w,T(n)),C=()=>e.inject(w,()=>T(),!0),$=(o,n)=>{const t=o.split(".").reduce((l,a)=>!l||typeof l=="string"?l:l[a],n);return t&&typeof t=="string"?t:void 0},fe=(o,n)=>{const t=o.split(" | ").map(a=>a.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]},_e=(o,n)=>n?Object.entries(n).reduce((l,[a,i])=>i===void 0?l:l.replace(new RegExp(`{${a}}`,"gi"),i.toString()),o).replace(/\s?{.*}\s?/gi,""):o,x=o=>({requiredTypeClass:e.computed(()=>({[`onyx-use-${o.requiredMarker}`]:o.requiredMarker})),requiredMarkerClass:e.computed(()=>({"onyx-required-marker":o.required,"onyx-optional-marker":!o.required}))}),ke={key:0,class:"onyx-checkbox-skeleton"},ve={class:"onyx-checkbox__container"},he=["aria-label","indeterminate","disabled","required"],g=e.defineComponent({__name:"OnyxCheckbox",props:{required:{type:Boolean,default:!1},requiredMarker:{},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"],setup(o,{emit:n}){const t=o,{requiredMarkerClass:l,requiredTypeClass:a}=x(t),i=n,c=e.computed({get:()=>t.modelValue,set:u=>i("update:modelValue",u)}),r=e.ref(!1);return(u,s)=>t.skeleton?(e.openBlock(),e.createElementBlock("div",ke,[e.createVNode(_,{class:"onyx-checkbox-skeleton__input"}),t.hideLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(_,{key:0,class:"onyx-checkbox-skeleton__label"}))])):(e.openBlock(),e.createElementBlock("label",{key:1,class:e.normalizeClass(["onyx-checkbox",[e.unref(a)]])},[e.createElementVNode("div",ve,[t.loading?(e.openBlock(),e.createBlock(e.unref(k),{key:0,class:"onyx-checkbox__loading",type:"circle"})):e.withDirectives((e.openBlock(),e.createElementBlock("input",{key:1,"onUpdate:modelValue":s[0]||(s[0]=p=>c.value=p),"aria-label":t.hideLabel?t.label:void 0,class:e.normalizeClass(["onyx-checkbox__input",{"onyx-checkbox__input--touched":r.value}]),type:"checkbox",indeterminate:t.indeterminate,disabled:t.disabled,required:t.required,onBlur:s[1]||(s[1]=p=>r.value=!0)},null,42,he)),[[e.vModelCheckbox,c.value]])]),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(l):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(l)]])},null,2)):e.createCommentVNode("",!0)],64))],2))}}),xe=["disabled"],ge={key:0,class:"onyx-checkbox-group__label"},be=e.defineComponent({__name:"OnyxCheckboxGroup",props:{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,l=n,{t:a}=C(),i=(s,p)=>{const d=p?[...t.modelValue,s]:t.modelValue.filter(m=>m!==s);l("update:modelValue",d)},c=e.computed(()=>t.options.filter(s=>!s.disabled&&!s.skeleton)),r=s=>{const p=s?c.value.map(({id:d})=>d):[];l("update:modelValue",p)},u=e.computed(()=>{const s=c.value.map(({id:d})=>d),p=t.modelValue.filter(d=>s.includes(d));return!s.length||!p.length?{modelValue:!1}:p.length===s.length?{modelValue:!0}:{indeterminate:!0,modelValue:!1}});return(s,p)=>(e.openBlock(),e.createElementBlock("fieldset",{class:"onyx-checkbox-group",disabled:t.disabled},[t.headline?(e.openBlock(),e.createElementBlock("legend",ge,[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(g,e.mergeProps({key:0},u.value,{label:t.checkAllLabel||e.unref(a)("selectAll"),"onUpdate:modelValue":r}),null,16,["label"])):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,d=>(e.openBlock(),e.createBlock(g,e.mergeProps({key:d.id.toString()},d,{"model-value":t.modelValue.includes(d.id),"onUpdate:modelValue":m=>i(d.id,m)}),null,16,["model-value","onUpdate:modelValue"]))),128))],64)):(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(t.skeleton,d=>(e.openBlock(),e.createBlock(g,{key:d,label:`Skeleton ${d}`,skeleton:""},null,8,["label"]))),128))],2)],8,xe))}}),L=o=>o,Be=(()=>{let o=1;return()=>o++})(),E=o=>`${o}-${Be()}`,Ce=L(o=>{const n=e.computed(()=>e.unref(o.multiselect)??!1),t=new Map,l=c=>(t.has(c)||t.set(c,E("listbox-option")),t.get(c)),a=e.ref(!1);e.watchEffect(()=>{var r;if(o.activeOption.value==null||!a.value)return;const c=l(o.activeOption.value);(r=document.getElementById(c))==null||r.scrollIntoView({block:"nearest",inline:"nearest"})});const i=c=>{var r,u,s,p,d,m,y;switch(c.key){case" ":c.preventDefault(),o.activeOption.value!=null&&((r=o.onSelect)==null||r.call(o,o.activeOption.value));break;case"ArrowUp":case"ArrowDown":if(c.preventDefault(),o.activeOption.value==null){(u=o.onActivateFirst)==null||u.call(o);return}c.key==="ArrowDown"?(s=o.onActivateNext)==null||s.call(o,o.activeOption.value):(p=o.onActivatePrevious)==null||p.call(o,o.activeOption.value);break;case"Home":c.preventDefault(),(d=o.onActivateFirst)==null||d.call(o);break;case"End":c.preventDefault(),(m=o.onActivateLast)==null||m.call(o);break;default:(y=o.onTypeAhead)==null||y.call(o,c.key)}};return{elements:{listbox:e.computed(()=>({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:()=>a.value=!0,onBlur:()=>a.value=!1,onKeydown:i})),group:e.computed(()=>c=>({role:"group","aria-label":c.label})),option:e.computed(()=>c=>{const r=c.selected??!1;return{id:l(c.value),role:"option","aria-label":c.label,"aria-checked":n.value?r:void 0,"aria-selected":n.value?void 0:r,"aria-disabled":c.disabled,onClick:()=>{var u;return(u=o.onSelect)==null?void 0:u.call(o,c.value)}}})},state:{isFocused:a}}}),Ee=L(o=>{const n=E("tooltip"),t=e.ref(!1);let l;const a=e.computed(()=>{const m=e.unref(o.open);return typeof m!="object"?200:m.debounce}),i=e.computed(()=>{const m=e.unref(o.open);return typeof m!="object"?m:m.type}),c=e.computed({get:()=>t.value,set:m=>{clearTimeout(l),l=setTimeout(()=>{t.value=m},a.value)}}),r=e.computed(()=>typeof i.value=="boolean"?i.value:c.value),u=()=>{t.value=!t.value},s=e.computed(()=>{if(i.value==="hover")return{onMouseover:()=>c.value=!0,onMouseout:()=>c.value=!1,onFocusin:()=>t.value=!0,onFocusout:()=>t.value=!1}}),p=m=>{m.key==="Escape"&&(t.value=!1)},d=m=>{var h;const y=(h=document.getElementById(n))==null?void 0:h.parentElement;if(!y||!(m.target instanceof Node))return;!y.contains(m.target)&&(t.value=!1)};return e.watchEffect(()=>{document.removeEventListener("keydown",p),document.removeEventListener("click",d),i.value==="click"&&(document.addEventListener("keydown",p),document.addEventListener("click",d))}),e.onBeforeUnmount(()=>{document.addEventListener("keydown",p),document.addEventListener("click",d)}),{elements:{trigger:e.computed(()=>({"aria-describedby":n,onClick:i.value==="click"?u:void 0,...s.value})),tooltip:e.computed(()=>({role:"tooltip",id:n,tabindex:"-1",...s.value}))},state:{isVisible:r}}}),Ve={class:"onyx-truncation-ellipsis"},Se=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",Ve,[e.renderSlot(t.$slots,"default")])],2))}}),Oe={class:"onyx-listbox"},$e={key:0,class:"onyx-listbox__label onyx-text--small"},Ne=e.defineComponent({__name:"OnyxListbox",props:{options:{},label:{},modelValue:{},hideLabel:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(o,{emit:n}){const t=o,l=n,a=e.ref();e.watch(()=>t.modelValue,r=>{a.value=r});const{elements:{listbox:i,option:c}}=Ce({label:e.computed(()=>t.label),selectedOption:e.computed(()=>t.modelValue),activeOption:a,onSelect:r=>{t.modelValue===r?l("update:modelValue",void 0):l("update:modelValue",r)},onActivateFirst:()=>{var r;return a.value=(r=t.options.at(0))==null?void 0:r.id},onActivateLast:()=>{var r;return a.value=(r=t.options.at(-1))==null?void 0:r.id},onActivateNext:r=>{const u=t.options.findIndex(s=>s.id===r);u<t.options.length-1&&(a.value=t.options[u+1].id)},onActivatePrevious:r=>{const u=t.options.findIndex(s=>s.id===r);u>0&&(a.value=t.options[u-1].id)},onTypeAhead:r=>{const u=t.options.find(s=>s.label.toLowerCase().trim().startsWith(r.toLowerCase()));u&&(a.value=u.id)}});return(r,u)=>(e.openBlock(),e.createElementBlock("div",Oe,[e.createElementVNode("ul",e.mergeProps(e.unref(i),{class:"onyx-listbox__options"}),[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,s=>(e.openBlock(),e.createBlock(Se,e.mergeProps({key:s.id.toString()},e.unref(c)({value:s.id,label:s.label,disabled:s.disabled,selected:s.id===t.modelValue}),{active:s.id===a.value}),{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(s.label),1)]),_:2},1040,["active"]))),128))],16),t.hideLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",$e,e.toDisplayString(t.label),1))]))}}),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"]))}}),we=["h1","h2","h3","h4","h5","h6"],Te=["12px","16px","24px","32px","48px","64px","96px"],Le=["aria-label","disabled"],Ie=e.defineComponent({__name:"OnyxIconButton",props:{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,l=n;return(a,i)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(["onyx-icon-button",{[`onyx-icon-button--${t.variation}`]:!0,"onyx-icon-button--loading":t.loading}]),"aria-label":t.label,disabled:t.disabled||t.loading,onClick:i[0]||(i[0]=c=>l("click"))},[t.loading?(e.openBlock(),e.createBlock(k,{key:0,type:"circle"})):t.icon?(e.openBlock(),e.createBlock(v,{key:1,icon:t.icon},null,8,["icon"])):e.renderSlot(a.$slots,"default",{key:2})],10,Le))}}),Me={class:"onyx-truncation-ellipsis"},qe={class:"onyx-input__wrapper"},ze=["placeholder","type","required","autocapitalize","autocomplete","autofocus","name","pattern","readonly","disabled","minlength","maxlength","aria-label"],Pe={key:0,class:"onyx-input__footer onyx-text--small"},Ae={key:0,class:"onyx-truncation-ellipsis"},De={key:1,class:"onyx-input__counter"},Ue=e.defineComponent({__name:"OnyxInput",props:{required:{type:Boolean,default:!1},requiredMarker:{},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"],setup(o,{emit:n}){const t=o,l=n,{requiredMarkerClass:a,requiredTypeClass:i}=x(t),c=e.computed({get:()=>t.modelValue,set:p=>l("update:modelValue",p)}),r=p=>{const d=p.target.value;l("change",d)},u=e.computed(()=>t.pattern instanceof RegExp?t.pattern.source:t.pattern),s=e.computed(()=>t.withCounter&&t.maxlength);return(p,d)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["onyx-input",e.unref(i)])},[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(a)])},[e.createElementVNode("div",Me,e.toDisplayString(t.label),1)],2)),e.createElementVNode("div",qe,[t.loading?(e.openBlock(),e.createBlock(k,{key:0,class:"onyx-input__loading",type:"circle"})):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":d[0]||(d[0]=m=>c.value=m),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:u.value,readonly:t.readonly,disabled:t.disabled||t.loading,minlength:t.minlength,maxlength:t.maxlength,"aria-label":t.hideLabel?t.label:void 0,onChange:r,onFocus:d[1]||(d[1]=m=>l("focus")),onBlur:d[2]||(d[2]=m=>l("blur"))},null,40,ze),[[e.vModelDynamic,c.value]])])]),t.message||s.value?(e.openBlock(),e.createElementBlock("div",Pe,[t.message?(e.openBlock(),e.createElementBlock("span",Ae,e.toDisplayString(t.message),1)):e.createCommentVNode("",!0),s.value?(e.openBlock(),e.createElementBlock("span",De,e.toDisplayString(c.value.length)+"/"+e.toDisplayString(t.maxlength),1)):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0)],2))}}),Re=["email","password","search","tel","text","url"],Fe=["none","sentences","words","characters"],Ye='<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>',je=o=>/^http(s?):\/\//.test(o),Ge=["href","target","rel"],He=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,a=e.computed(()=>t.withExternalIcon!=="auto"?t.withExternalIcon:je(t.href));return(i,c)=>(e.openBlock(),e.createElementBlock("a",{class:"onyx-link",href:t.href,target:t.target,rel:t.target==="_blank"?"noreferrer":void 0,onClick:c[0]||(c[0]=r=>l("click"))},[e.renderSlot(i.$slots,"default"),a.value?(e.openBlock(),e.createBlock(v,{key:0,class:"onyx-link__icon",icon:e.unref(Ye),size:"16px"},null,8,["icon"])):e.createCommentVNode("",!0)],8,Ge))}}),Ke=["_self","_blank","_parent","_top"],Ze={key:0,class:"onyx-page__sidebar"},Xe={class:"onyx-page__main"},We={key:1,class:"onyx-page__footer"},Je={key:2,class:"onyx-page__toasts"},Qe=e.defineComponent({__name:"OnyxPageLayout",props:{footerAsideSidebar:{type:Boolean},hideSidebar:{type:Boolean}},setup(o){const n=o,t=e.useSlots(),l=e.computed(()=>{let a="";return!t.footer&&t.sidebar&&(a="onyx-page--side-main"),t.footer&&(!t.sidebar||n.hideSidebar)&&(a="onyx-page--main-footer"),t.footer&&t.sidebar&&(n.footerAsideSidebar?a="onyx-page--side-main-footer-partial":a="onyx-page--side-main-footer-full"),a});return(a,i)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["onyx-page",l.value])},[e.unref(t).sidebar&&!n.hideSidebar?(e.openBlock(),e.createElementBlock("aside",Ze,[e.renderSlot(a.$slots,"sidebar")])):e.createCommentVNode("",!0),e.createElementVNode("main",Xe,[e.renderSlot(a.$slots,"default")]),e.unref(t).footer?(e.openBlock(),e.createElementBlock("footer",We,[e.renderSlot(a.$slots,"footer")])):e.createCommentVNode("",!0),e.unref(t).toasts?(e.openBlock(),e.createElementBlock("div",Je,[e.renderSlot(a.$slots,"toasts")])):e.createCommentVNode("",!0)],2))}}),I=o=>({densityClass:e.computed(()=>({[`onyx-density-${o.density}`]:o.density}))}),et=["title"],tt=["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:{},name:{},selected:{type:Boolean,default:!1},required:{type:Boolean,default:!1},errorMessage:{}},setup(o){const n=o,t=e.ref(),{densityClass:l}=I(n);return e.watchEffect(()=>{var a;return(a=t.value)==null?void 0:a.setCustomValidity(n.errorMessage??"")}),(a,i)=>n.skeleton?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["onyx-radio-button-skeleton",e.unref(l)])},[e.createVNode(_,{class:"onyx-radio-button-skeleton__input"}),e.createVNode(_,{class:"onyx-radio-button-skeleton__label"})],2)):(e.openBlock(),e.createElementBlock("label",{key:1,class:e.normalizeClass(["onyx-radio-button",e.unref(l)]),title:n.errorMessage},[n.loading?(e.openBlock(),e.createBlock(e.unref(k),{key:0,class:"onyx-radio-button__loading",type:"circle"})):(e.openBlock(),e.createElementBlock("input",{key:1,ref_key:"selectorRef",ref:t,class:"onyx-radio-button__selector",type:"radio",required:n.required,name:n.name,value:n.id,checked:n.selected,disabled:n.disabled},null,8,tt)),e.createElementVNode("span",{class:e.normalizeClass(["onyx-radio-button__label",[`onyx-truncation-${n.truncation}`]])},e.toDisplayString(n.label),3)],10,et))}}),ot=["disabled"],nt={key:0,class:"onyx-radio-button-group__headline"},lt=e.defineComponent({__name:"OnyxRadioButtonGroup",props:{density:{},required:{type:Boolean,default:!1},requiredMarker:{},name:{default:()=>E("radio-button-group-name")},modelValue:{},headline:{default:""},disabled:{type:Boolean,default:!1},errorMessage:{default:""},direction:{default:"vertical"},options:{},skeleton:{}},emits:["update:modelValue"],setup(o,{emit:n}){const t=o,{densityClass:l}=I(t),{requiredMarkerClass:a,requiredTypeClass:i}=x(t),c=n,r=u=>c("update:modelValue",t.options.find(({id:s})=>u.target.value===s));return(u,s)=>(e.openBlock(),e.createElementBlock("fieldset",{class:e.normalizeClass(["onyx-radio-button-group",e.unref(l),e.unref(i)]),disabled:t.disabled,onChange:s[0]||(s[0]=p=>r(p))},[t.headline?(e.openBlock(),e.createElementBlock("legend",nt,[e.createVNode(V,{is:"h3",class:e.normalizeClass(e.unref(a))},{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,p=>{var d;return e.openBlock(),e.createBlock(N,e.mergeProps({key:p.id.toString()},p,{name:t.name,"error-message":t.errorMessage,selected:p.id===((d=t.modelValue)==null?void 0:d.id),required:t.required}),null,16,["name","error-message","selected","required"])}),128)):(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(t.skeleton,p=>(e.openBlock(),e.createBlock(N,{id:`skeleton-${p}`,key:p,label:"Skeleton ${i}",name:t.name,skeleton:""},null,8,["id","name"]))),128))],2)],42,ot))}}),M=(o,n)=>{const t=Object.entries(o).filter(([a,i])=>i!==void 0),l=Object.entries(n).filter(([a,i])=>i!==void 0);return t.length!==l.length?!1:t.every(([a,i])=>i===n[a])},q=()=>Object.entries(Object.getOwnPropertyDescriptors(ValidityState.prototype)).filter(([o,n])=>n.enumerable).map(([o])=>o),z=o=>q().reduce((n,t)=>(n[t]=o[t],n),{}),at=o=>{if(o.valueMissing)return"valueMissing";const n=q().filter(t=>t!=="valid").sort();for(const t of n)if(t in o&&o[t])return t},rt='<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>',st='<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={key:0,class:"onyx-switch-skeleton"},it=["aria-label","disabled","required"],ut={class:"onyx-switch__container"},dt={class:"onyx-switch__icon"},pt=e.defineComponent({__name:"OnyxSwitch",props:{required:{type:Boolean},requiredMarker:{},modelValue:{type:Boolean,default:!1},label:{},disabled:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},errorMessage:{},hideLabel:{type:Boolean},truncation:{default:"ellipsis"},skeleton:{type:Boolean,default:!1}},emits:["update:modelValue","validityChange"],setup(o,{emit:n}){var p;const t=o,l=n,{requiredMarkerClass:a,requiredTypeClass:i}=x(t),{errorMessage:c}=e.toRefs(t),r=e.ref(),u=e.ref((p=r.value)==null?void 0:p.validity),s=e.computed({get:()=>t.modelValue,set:d=>{l("update:modelValue",d)}});return e.watch([r,c],()=>{r.value&&r.value.setCustomValidity(t.errorMessage||"")}),e.watch([r,s,c],()=>{if(!r.value)return;const d=z(r.value.validity);(!u.value||!M(d,u.value))&&(u.value=d,l("validityChange",u.value))},{immediate:!0}),(d,m)=>t.skeleton?(e.openBlock(),e.createElementBlock("div",ct,[e.createVNode(_,{class:"onyx-switch-skeleton__input"}),t.hideLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(_,{key:0,class:"onyx-switch-skeleton__label"}))])):(e.openBlock(),e.createElementBlock("label",{key:1,class:e.normalizeClass(["onyx-switch",[e.unref(i)]])},[e.withDirectives(e.createElementVNode("input",{ref_key:"inputElement",ref:r,"onUpdate:modelValue":m[0]||(m[0]=y=>s.value=y),class:e.normalizeClass({"onyx-switch__input":!0,"onyx-switch__loading":t.loading}),type:"checkbox","aria-label":t.hideLabel?t.label:void 0,disabled:t.disabled||t.loading,required:t.required},null,10,it),[[e.vModelCheckbox,s.value]]),e.createElementVNode("span",ut,[e.createElementVNode("span",dt,[t.loading?(e.openBlock(),e.createBlock(e.unref(k),{key:0,class:"onyx-switch__spinner",type:"circle"})):(e.openBlock(),e.createBlock(e.unref(v),{key:1,icon:s.value?e.unref(rt):e.unref(st),size:"24px"},null,8,["icon"]))])]),t.hideLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(["onyx-switch__label",[`onyx-truncation-${t.truncation}`,e.unref(a)]])},e.toDisplayString(t.label),3))],2))}}),mt=Object.keys(b.validations.typeMismatch),yt={key:0,class:"onyx-test-input__error","aria-live":"polite"},ft={class:"onyx-test-input__info"},_t=e.defineComponent({__name:"TestInput",props:{modelValue:{default:""},label:{default:""},errorMessage:{},required:{type:Boolean},pattern:{},type:{default:"text"},max:{},maxLength:{},min:{},step:{},minLength:{}},emits:["update:modelValue","change","validityChange"],setup(o,{emit:n}){var m;const t=o,l=n,{t:a}=C(),{errorMessage:i}=e.toRefs(t),c=e.ref(!1),r=e.ref(null),u=e.ref((m=r.value)==null?void 0:m.validity),s=e.computed({get:()=>t.modelValue,set:y=>l("update:modelValue",y)}),p=e.computed(()=>{if(!u.value||u.value.valid)return"";const y=at(u.value);if(t.errorMessage||y==="customError")return t.errorMessage;if(!y)return"";if(y==="typeMismatch"){const f=mt.includes(t.type)?t.type:"generic";return a.value(`validations.typeMismatch.${f}`,{value:s.value})}return a.value(`validations.${y}`,{value:s.value,n:s.value.toString().length,minLength:t.minLength,maxLength:t.maxLength,min:t.min,max:t.max,step:t.step})}),d=y=>{const f=y.target;l("change",f.value)};return e.watch([r,i],()=>{r.value&&r.value.setCustomValidity(t.errorMessage||"")}),e.watch([r,s,i],()=>{if(!r.value)return;const y=z(r.value.validity);(!u.value||!M(y,u.value))&&(u.value=y,l("validityChange",u.value))},{immediate:!0}),(y,f)=>{var h,S;return e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass(["onyx-test-input",{"onyx-test-input--touched":c.value}])},[e.createElementVNode("span",{class:e.normalizeClass(["onyx-test-input__label",{"onyx-test-input__label--required":t.required}])},e.toDisplayString(t.label),3),e.withDirectives(e.createElementVNode("input",e.mergeProps(t,{ref_key:"inputElement",ref:r,"onUpdate:modelValue":f[0]||(f[0]=O=>s.value=O),onChange:d,onBlur:f[1]||(f[1]=O=>c.value=!0)}),null,16),[[e.vModelDynamic,s.value]]),c.value&&!((h=u.value)!=null&&h.valid)?(e.openBlock(),e.createElementBlock("p",yt,e.toDisplayString(p.value),1)):e.createCommentVNode("",!0),e.createElementVNode("p",ft,' Model value: "'+e.toDisplayString(s.value)+'", is valid: '+e.toDisplayString((S=u.value)==null?void 0:S.valid),1)],2)}}}),kt={class:"onyx-tooltip-wrapper"},vt=e.defineComponent({__name:"OnyxTooltip",props:{text:{},icon:{},color:{default:"neutral"},position:{default:"top"},fitParent:{type:Boolean,default:!1},open:{type:[Boolean,Object],default:"hover"}},setup(o){const n=o,{elements:{trigger:t,tooltip:l},state:{isVisible:a}}=Ee({open:e.computed(()=>n.open)});return(i,c)=>(e.openBlock(),e.createElementBlock("div",kt,[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(a)}]}),[n.icon?(e.openBlock(),e.createBlock(v,{key:0,icon:n.icon,size:"16px"},null,8,["icon"])):e.createCommentVNode("",!0),e.createElementVNode("span",null,e.toDisplayString(n.text),1)],16),e.createElementVNode("div",e.normalizeProps(e.guardReactiveProps(e.unref(t))),[e.renderSlot(i.$slots,"default")],16)]))}}),ht=["top","bottom"],xt=["primary","secondary","neutral","danger","warning","success","info"],gt=["small","default","large"],bt=["ellipsis","multiline"],Bt=["horizontal","vertical"],Ct=o=>({install:n=>{ye(n,o.i18n);const t=n.runWithContext(()=>C());e.watchEffect(()=>Et(t.t.value("optional")))}}),Et=o=>globalThis.document.body.style.setProperty("--onyx-global-optional-text",o);exports.AUTOCAPITALIZE=Fe;exports.BUTTON_MODES=ue;exports.BUTTON_TYPES=ce;exports.BUTTON_VARIATIONS=ie;exports.DIRECTIONS=Bt;exports.HEADLINE_TYPES=we;exports.ICON_SIZES=Te;exports.INPUT_TYPES=Re;exports.LINK_TARGETS=Ke;exports.ONYX_COLORS=xt;exports.OnyxAppLayout=R;exports.OnyxButton=se;exports.OnyxCheckboxGroup=be;exports.OnyxHeadline=V;exports.OnyxIcon=v;exports.OnyxIconButton=Ie;exports.OnyxInput=Ue;exports.OnyxLink=He;exports.OnyxListbox=Ne;exports.OnyxLoadingIndicator=k;exports.OnyxPageLayout=Qe;exports.OnyxRadioButtonGroup=lt;exports.OnyxSkeleton=_;exports.OnyxSwitch=pt;exports.OnyxTooltip=vt;exports.TEXT_SIZES=gt;exports.TOOLTIP_POSITIONS=ht;exports.TRUNCATION_TYPES=bt;exports.TestInput=_t;exports.createOnyx=Ct;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),P={key:0,class:"onyx-app__nav"},A={class:"onyx-app__page"},D={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,a)=>(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",P,[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",D,[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=["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,F))}}),B=(o,n)=>{const t=o.__vccOpts||o;for(const[l,a]of n)t[l]=a;return t},Y={},j={class:"onyx-circle-spinner",viewBox:"0 0 50 50"},G=e.createElementVNode("circle",{class:"onyx-circle-spinner__circle",cx:"50%",cy:"50%",r:"45%"},null,-1),H=[G];function K(o,n){return e.openBlock(),e.createElementBlock("svg",j,H)}const Z=B(Y,[["render",K]]),X={},W={class:"onyx-loading-dots"},J=e.createElementVNode("span",{class:"onyx-loading-dots__center"},null,-1),Q=[J];function ee(o,n){return e.openBlock(),e.createElementBlock("div",W,Q)}const te=B(X,[["render",ee]]),k=e.defineComponent({__name:"OnyxLoadingIndicator",props:{type:{default:"dots"}},setup(o){const n=o;return(t,l)=>n.type==="circle"?(e.openBlock(),e.createBlock(Z,{key:0})):n.type==="dots"?(e.openBlock(),e.createBlock(te,{key:1})):e.createCommentVNode("",!0)}}),oe={},ne={"aria-hidden":"true",class:"onyx-skeleton"};function le(o,n){return e.openBlock(),e.createElementBlock("figure",ne)}const _=B(oe,[["render",le]]),ae=["disabled"],re={key:2,class:"onyx-button__label onyx-truncation-ellipsis"},se=e.defineComponent({__name:"OnyxButton",props:{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,l=n;return(a,i)=>t.skeleton?(e.openBlock(),e.createBlock(_,{key:0,class:"onyx-button-skeleton"})):(e.openBlock(),e.createElementBlock("button",{key:1,class:e.normalizeClass(["onyx-button",{[`onyx-button--${t.variation}`]:!0,[`onyx-button--${t.mode}`]:!0,"onyx-button--loading":t.loading}]),disabled:t.disabled||t.loading,onClick:i[0]||(i[0]=c=>l("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(k,{key:1,class:"onyx-button__loading"})):(e.openBlock(),e.createElementBlock("span",re,e.toDisplayString(t.label),1))],10,ae))}}),ce=["button","submit","reset"],ie=["primary","secondary","danger"],ue=["default","outline","plain"],de="(optional)",pe={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.'}},me="Select all",g={optional:de,validations:pe,selectAll:me},w=Symbol(),T=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]:g),l=e.computed(()=>(a,i={})=>{let c=$(a,t.value)??$(a,g)??"";const r=typeof i.n=="number"?i.n:void 0;return c=fe(c,r),_e(c,i)});return{locale:n,t:l}},ye=(o,n)=>o.provide(w,T(n)),C=()=>e.inject(w,()=>T(),!0),$=(o,n)=>{const t=o.split(".").reduce((l,a)=>!l||typeof l=="string"?l:l[a],n);return t&&typeof t=="string"?t:void 0},fe=(o,n)=>{const t=o.split(" | ").map(a=>a.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]},_e=(o,n)=>n?Object.entries(n).reduce((l,[a,i])=>i===void 0?l:l.replace(new RegExp(`{${a}}`,"gi"),i.toString()),o).replace(/\s?{.*}\s?/gi,""):o,x=o=>({requiredTypeClass:e.computed(()=>({[`onyx-use-${o.requiredMarker}`]:o.requiredMarker})),requiredMarkerClass:e.computed(()=>({"onyx-required-marker":o.required,"onyx-optional-marker":!o.required}))}),ke={key:0,class:"onyx-checkbox-skeleton"},ve={class:"onyx-checkbox__container"},he=["aria-label","title","indeterminate","disabled","required"],b=e.defineComponent({__name:"OnyxCheckbox",props:{required:{type:Boolean,default:!1},requiredMarker:{},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"],setup(o,{emit:n}){const t=o,{requiredMarkerClass:l,requiredTypeClass:a}=x(t),i=n,c=e.computed({get:()=>t.modelValue,set:u=>i("update:modelValue",u)}),r=e.ref(!1);return(u,s)=>t.skeleton?(e.openBlock(),e.createElementBlock("div",ke,[e.createVNode(_,{class:"onyx-checkbox-skeleton__input"}),t.hideLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(_,{key:0,class:"onyx-checkbox-skeleton__label"}))])):(e.openBlock(),e.createElementBlock("label",{key:1,class:e.normalizeClass(["onyx-checkbox",[e.unref(a)]])},[e.createElementVNode("div",ve,[t.loading?(e.openBlock(),e.createBlock(e.unref(k),{key:0,class:"onyx-checkbox__loading",type:"circle"})):e.withDirectives((e.openBlock(),e.createElementBlock("input",{key:1,"onUpdate:modelValue":s[0]||(s[0]=p=>c.value=p),"aria-label":t.hideLabel?t.label:void 0,title:t.hideLabel?t.label:void 0,class:e.normalizeClass(["onyx-checkbox__input",{"onyx-checkbox__input--touched":r.value}]),type:"checkbox",indeterminate:t.indeterminate,disabled:t.disabled,required:t.required,onBlur:s[1]||(s[1]=p=>r.value=!0)},null,42,he)),[[e.vModelCheckbox,c.value]])]),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(l):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(l)]])},null,2)):e.createCommentVNode("",!0)],64))],2))}}),xe=["disabled"],be={key:0,class:"onyx-checkbox-group__label"},ge=e.defineComponent({__name:"OnyxCheckboxGroup",props:{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,l=n,{t:a}=C(),i=(s,p)=>{const d=p?[...t.modelValue,s]:t.modelValue.filter(m=>m!==s);l("update:modelValue",d)},c=e.computed(()=>t.options.filter(s=>!s.disabled&&!s.skeleton)),r=s=>{const p=s?c.value.map(({id:d})=>d):[];l("update:modelValue",p)},u=e.computed(()=>{const s=c.value.map(({id:d})=>d),p=t.modelValue.filter(d=>s.includes(d));return!s.length||!p.length?{modelValue:!1}:p.length===s.length?{modelValue:!0}:{indeterminate:!0,modelValue:!1}});return(s,p)=>(e.openBlock(),e.createElementBlock("fieldset",{class:"onyx-checkbox-group",disabled:t.disabled},[t.headline?(e.openBlock(),e.createElementBlock("legend",be,[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(b,e.mergeProps({key:0},u.value,{label:t.checkAllLabel||e.unref(a)("selectAll"),"onUpdate:modelValue":r}),null,16,["label"])):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,d=>(e.openBlock(),e.createBlock(b,e.mergeProps({key:d.id.toString()},d,{"model-value":t.modelValue.includes(d.id),"onUpdate:modelValue":m=>i(d.id,m)}),null,16,["model-value","onUpdate:modelValue"]))),128))],64)):(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(t.skeleton,d=>(e.openBlock(),e.createBlock(b,{key:d,label:`Skeleton ${d}`,skeleton:""},null,8,["label"]))),128))],2)],8,xe))}}),L=o=>o,Be=(()=>{let o=1;return()=>o++})(),E=o=>`${o}-${Be()}`,Ce=L(o=>{const n=e.computed(()=>e.unref(o.multiselect)??!1),t=new Map,l=c=>(t.has(c)||t.set(c,E("listbox-option")),t.get(c)),a=e.ref(!1);e.watchEffect(()=>{var r;if(o.activeOption.value==null||!a.value)return;const c=l(o.activeOption.value);(r=document.getElementById(c))==null||r.scrollIntoView({block:"nearest",inline:"nearest"})});const i=c=>{var r,u,s,p,d,m,y;switch(c.key){case" ":c.preventDefault(),o.activeOption.value!=null&&((r=o.onSelect)==null||r.call(o,o.activeOption.value));break;case"ArrowUp":case"ArrowDown":if(c.preventDefault(),o.activeOption.value==null){(u=o.onActivateFirst)==null||u.call(o);return}c.key==="ArrowDown"?(s=o.onActivateNext)==null||s.call(o,o.activeOption.value):(p=o.onActivatePrevious)==null||p.call(o,o.activeOption.value);break;case"Home":c.preventDefault(),(d=o.onActivateFirst)==null||d.call(o);break;case"End":c.preventDefault(),(m=o.onActivateLast)==null||m.call(o);break;default:(y=o.onTypeAhead)==null||y.call(o,c.key)}};return{elements:{listbox:e.computed(()=>({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:()=>a.value=!0,onBlur:()=>a.value=!1,onKeydown:i})),group:e.computed(()=>c=>({role:"group","aria-label":c.label})),option:e.computed(()=>c=>{const r=c.selected??!1;return{id:l(c.value),role:"option","aria-label":c.label,"aria-checked":n.value?r:void 0,"aria-selected":n.value?void 0:r,"aria-disabled":c.disabled,onClick:()=>{var u;return(u=o.onSelect)==null?void 0:u.call(o,c.value)}}})},state:{isFocused:a}}}),Ee=L(o=>{const n=E("tooltip"),t=e.ref(!1);let l;const a=e.computed(()=>{const m=e.unref(o.open);return typeof m!="object"?200:m.debounce}),i=e.computed(()=>{const m=e.unref(o.open);return typeof m!="object"?m:m.type}),c=e.computed({get:()=>t.value,set:m=>{clearTimeout(l),l=setTimeout(()=>{t.value=m},a.value)}}),r=e.computed(()=>typeof i.value=="boolean"?i.value:c.value),u=()=>{t.value=!t.value},s=e.computed(()=>{if(i.value==="hover")return{onMouseover:()=>c.value=!0,onMouseout:()=>c.value=!1,onFocusin:()=>t.value=!0,onFocusout:()=>t.value=!1}}),p=m=>{m.key==="Escape"&&(t.value=!1)},d=m=>{var h;const y=(h=document.getElementById(n))==null?void 0:h.parentElement;if(!y||!(m.target instanceof Node))return;!y.contains(m.target)&&(t.value=!1)};return document.addEventListener("keydown",p),e.watchEffect(()=>{i.value==="click"?document.addEventListener("click",d):document.removeEventListener("click",d)}),e.onBeforeUnmount(()=>{document.addEventListener("keydown",p),document.addEventListener("click",d)}),{elements:{trigger:e.computed(()=>({"aria-describedby":n,onClick:i.value==="click"?u:void 0,...s.value})),tooltip:e.computed(()=>({role:"tooltip",id:n,tabindex:"-1",...s.value}))},state:{isVisible:r}}}),Ve={class:"onyx-truncation-ellipsis"},Se=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",Ve,[e.renderSlot(t.$slots,"default")])],2))}}),Oe={class:"onyx-listbox"},$e={key:0,class:"onyx-listbox__label onyx-text--small"},Ne=e.defineComponent({__name:"OnyxListbox",props:{options:{},label:{},modelValue:{},hideLabel:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(o,{emit:n}){const t=o,l=n,a=e.ref();e.watch(()=>t.modelValue,r=>{a.value=r});const{elements:{listbox:i,option:c}}=Ce({label:e.computed(()=>t.label),selectedOption:e.computed(()=>t.modelValue),activeOption:a,onSelect:r=>{t.modelValue===r?l("update:modelValue",void 0):l("update:modelValue",r)},onActivateFirst:()=>{var r;return a.value=(r=t.options.at(0))==null?void 0:r.id},onActivateLast:()=>{var r;return a.value=(r=t.options.at(-1))==null?void 0:r.id},onActivateNext:r=>{const u=t.options.findIndex(s=>s.id===r);u<t.options.length-1&&(a.value=t.options[u+1].id)},onActivatePrevious:r=>{const u=t.options.findIndex(s=>s.id===r);u>0&&(a.value=t.options[u-1].id)},onTypeAhead:r=>{const u=t.options.find(s=>s.label.toLowerCase().trim().startsWith(r.toLowerCase()));u&&(a.value=u.id)}});return(r,u)=>(e.openBlock(),e.createElementBlock("div",Oe,[e.createElementVNode("ul",e.mergeProps(e.unref(i),{class:"onyx-listbox__options"}),[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,s=>(e.openBlock(),e.createBlock(Se,e.mergeProps({key:s.id.toString()},e.unref(c)({value:s.id,label:s.label,disabled:s.disabled,selected:s.id===t.modelValue}),{active:s.id===a.value}),{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(s.label),1)]),_:2},1040,["active"]))),128))],16),t.hideLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",$e,e.toDisplayString(t.label),1))]))}}),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"]))}}),we=["h1","h2","h3","h4","h5","h6"],Te=["12px","16px","24px","32px","48px","64px","96px"],Le=["aria-label","title","disabled"],Ie=e.defineComponent({__name:"OnyxIconButton",props:{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,l=n;return(a,i)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(["onyx-icon-button",{[`onyx-icon-button--${t.variation}`]:!0,"onyx-icon-button--loading":t.loading}]),"aria-label":t.label,title:t.label,disabled:t.disabled||t.loading,onClick:i[0]||(i[0]=c=>l("click"))},[t.loading?(e.openBlock(),e.createBlock(k,{key:0,type:"circle"})):t.icon?(e.openBlock(),e.createBlock(v,{key:1,icon:t.icon},null,8,["icon"])):e.renderSlot(a.$slots,"default",{key:2})],10,Le))}}),Me={class:"onyx-truncation-ellipsis"},qe={class:"onyx-input__wrapper"},ze=["placeholder","type","required","autocapitalize","autocomplete","autofocus","name","pattern","readonly","disabled","minlength","maxlength","aria-label","title"],Pe={key:0,class:"onyx-input__footer onyx-text--small"},Ae={key:0,class:"onyx-truncation-ellipsis"},De={key:1,class:"onyx-input__counter"},Ue=e.defineComponent({__name:"OnyxInput",props:{required:{type:Boolean,default:!1},requiredMarker:{},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"],setup(o,{emit:n}){const t=o,l=n,{requiredMarkerClass:a,requiredTypeClass:i}=x(t),c=e.computed({get:()=>t.modelValue,set:p=>l("update:modelValue",p)}),r=p=>{const d=p.target.value;l("change",d)},u=e.computed(()=>t.pattern instanceof RegExp?t.pattern.source:t.pattern),s=e.computed(()=>t.withCounter&&t.maxlength);return(p,d)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["onyx-input",e.unref(i)])},[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(a)])},[e.createElementVNode("div",Me,e.toDisplayString(t.label),1)],2)),e.createElementVNode("div",qe,[t.loading?(e.openBlock(),e.createBlock(k,{key:0,class:"onyx-input__loading",type:"circle"})):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":d[0]||(d[0]=m=>c.value=m),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:u.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:r,onFocus:d[1]||(d[1]=m=>l("focus")),onBlur:d[2]||(d[2]=m=>l("blur"))},null,40,ze),[[e.vModelDynamic,c.value]])])]),t.message||s.value?(e.openBlock(),e.createElementBlock("div",Pe,[t.message?(e.openBlock(),e.createElementBlock("span",Ae,e.toDisplayString(t.message),1)):e.createCommentVNode("",!0),s.value?(e.openBlock(),e.createElementBlock("span",De,e.toDisplayString(c.value.length)+"/"+e.toDisplayString(t.maxlength),1)):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0)],2))}}),Re=["email","password","search","tel","text","url"],Fe=["none","sentences","words","characters"],Ye='<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>',je=o=>/^http(s?):\/\//.test(o),Ge=["href","target","rel"],He=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,a=e.computed(()=>t.withExternalIcon!=="auto"?t.withExternalIcon:je(t.href));return(i,c)=>(e.openBlock(),e.createElementBlock("a",{class:"onyx-link",href:t.href,target:t.target,rel:t.target==="_blank"?"noreferrer":void 0,onClick:c[0]||(c[0]=r=>l("click"))},[e.renderSlot(i.$slots,"default"),a.value?(e.openBlock(),e.createBlock(v,{key:0,class:"onyx-link__icon",icon:e.unref(Ye),size:"16px"},null,8,["icon"])):e.createCommentVNode("",!0)],8,Ge))}}),Ke=["_self","_blank","_parent","_top"],Ze={key:0,class:"onyx-page__sidebar"},Xe={class:"onyx-page__main"},We={key:1,class:"onyx-page__footer"},Je={key:2,class:"onyx-page__toasts"},Qe=e.defineComponent({__name:"OnyxPageLayout",props:{footerAsideSidebar:{type:Boolean},hideSidebar:{type:Boolean}},setup(o){const n=o,t=e.useSlots(),l=e.computed(()=>{let a="";return!t.footer&&t.sidebar&&(a="onyx-page--side-main"),t.footer&&(!t.sidebar||n.hideSidebar)&&(a="onyx-page--main-footer"),t.footer&&t.sidebar&&(n.footerAsideSidebar?a="onyx-page--side-main-footer-partial":a="onyx-page--side-main-footer-full"),a});return(a,i)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["onyx-page",l.value])},[e.unref(t).sidebar&&!n.hideSidebar?(e.openBlock(),e.createElementBlock("aside",Ze,[e.renderSlot(a.$slots,"sidebar")])):e.createCommentVNode("",!0),e.createElementVNode("main",Xe,[e.renderSlot(a.$slots,"default")]),e.unref(t).footer?(e.openBlock(),e.createElementBlock("footer",We,[e.renderSlot(a.$slots,"footer")])):e.createCommentVNode("",!0),e.unref(t).toasts?(e.openBlock(),e.createElementBlock("div",Je,[e.renderSlot(a.$slots,"toasts")])):e.createCommentVNode("",!0)],2))}}),I=o=>({densityClass:e.computed(()=>({[`onyx-density-${o.density}`]:o.density}))}),et=["title"],tt=["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:{},name:{},selected:{type:Boolean,default:!1},required:{type:Boolean,default:!1},errorMessage:{}},setup(o){const n=o,t=e.ref(),{densityClass:l}=I(n);return e.watchEffect(()=>{var a;return(a=t.value)==null?void 0:a.setCustomValidity(n.errorMessage??"")}),(a,i)=>n.skeleton?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["onyx-radio-button-skeleton",e.unref(l)])},[e.createVNode(_,{class:"onyx-radio-button-skeleton__input"}),e.createVNode(_,{class:"onyx-radio-button-skeleton__label"})],2)):(e.openBlock(),e.createElementBlock("label",{key:1,class:e.normalizeClass(["onyx-radio-button",e.unref(l)]),title:n.errorMessage},[n.loading?(e.openBlock(),e.createBlock(e.unref(k),{key:0,class:"onyx-radio-button__loading",type:"circle"})):(e.openBlock(),e.createElementBlock("input",{key:1,ref_key:"selectorRef",ref:t,class:"onyx-radio-button__selector",type:"radio",required:n.required,name:n.name,value:n.id,checked:n.selected,disabled:n.disabled},null,8,tt)),e.createElementVNode("span",{class:e.normalizeClass(["onyx-radio-button__label",[`onyx-truncation-${n.truncation}`]])},e.toDisplayString(n.label),3)],10,et))}}),ot=["disabled"],nt={key:0,class:"onyx-radio-button-group__headline"},lt=e.defineComponent({__name:"OnyxRadioButtonGroup",props:{density:{},required:{type:Boolean,default:!1},requiredMarker:{},name:{default:()=>E("radio-button-group-name")},modelValue:{},headline:{default:""},disabled:{type:Boolean,default:!1},errorMessage:{default:""},direction:{default:"vertical"},options:{},skeleton:{}},emits:["update:modelValue"],setup(o,{emit:n}){const t=o,{densityClass:l}=I(t),{requiredMarkerClass:a,requiredTypeClass:i}=x(t),c=n,r=u=>c("update:modelValue",t.options.find(({id:s})=>u.target.value===s));return(u,s)=>(e.openBlock(),e.createElementBlock("fieldset",{class:e.normalizeClass(["onyx-radio-button-group",e.unref(l),e.unref(i)]),disabled:t.disabled,onChange:s[0]||(s[0]=p=>r(p))},[t.headline?(e.openBlock(),e.createElementBlock("legend",nt,[e.createVNode(V,{is:"h3",class:e.normalizeClass(e.unref(a))},{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,p=>{var d;return e.openBlock(),e.createBlock(N,e.mergeProps({key:p.id.toString()},p,{name:t.name,"error-message":t.errorMessage,selected:p.id===((d=t.modelValue)==null?void 0:d.id),required:t.required}),null,16,["name","error-message","selected","required"])}),128)):(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(t.skeleton,p=>(e.openBlock(),e.createBlock(N,{id:`skeleton-${p}`,key:p,label:"Skeleton ${i}",name:t.name,skeleton:""},null,8,["id","name"]))),128))],2)],42,ot))}}),M=(o,n)=>{const t=Object.entries(o).filter(([a,i])=>i!==void 0),l=Object.entries(n).filter(([a,i])=>i!==void 0);return t.length!==l.length?!1:t.every(([a,i])=>i===n[a])},q=()=>Object.entries(Object.getOwnPropertyDescriptors(ValidityState.prototype)).filter(([o,n])=>n.enumerable).map(([o])=>o),z=o=>q().reduce((n,t)=>(n[t]=o[t],n),{}),at=o=>{if(o.valueMissing)return"valueMissing";const n=q().filter(t=>t!=="valid").sort();for(const t of n)if(t in o&&o[t])return t},rt='<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>',st='<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={key:0,class:"onyx-switch-skeleton"},it=["title"],ut=["aria-label","disabled","required"],dt={class:"onyx-switch__container"},pt={class:"onyx-switch__icon"},mt=e.defineComponent({__name:"OnyxSwitch",props:{required:{type:Boolean},requiredMarker:{},modelValue:{type:Boolean,default:!1},label:{},disabled:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},errorMessage:{},hideLabel:{type:Boolean},truncation:{default:"ellipsis"},skeleton:{type:Boolean,default:!1}},emits:["update:modelValue","validityChange"],setup(o,{emit:n}){var p;const t=o,l=n,{requiredMarkerClass:a,requiredTypeClass:i}=x(t),{errorMessage:c}=e.toRefs(t),r=e.ref(),u=e.ref((p=r.value)==null?void 0:p.validity),s=e.computed({get:()=>t.modelValue,set:d=>{l("update:modelValue",d)}});return e.watch([r,c],()=>{r.value&&r.value.setCustomValidity(t.errorMessage||"")}),e.watch([r,s,c],()=>{if(!r.value)return;const d=z(r.value.validity);(!u.value||!M(d,u.value))&&(u.value=d,l("validityChange",u.value))},{immediate:!0}),(d,m)=>t.skeleton?(e.openBlock(),e.createElementBlock("div",ct,[e.createVNode(_,{class:"onyx-switch-skeleton__input"}),t.hideLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(_,{key:0,class:"onyx-switch-skeleton__label"}))])):(e.openBlock(),e.createElementBlock("label",{key:1,class:e.normalizeClass(["onyx-switch",[e.unref(i)]]),title:t.hideLabel?t.label:void 0},[e.withDirectives(e.createElementVNode("input",{ref_key:"inputElement",ref:r,"onUpdate:modelValue":m[0]||(m[0]=y=>s.value=y),class:e.normalizeClass({"onyx-switch__input":!0,"onyx-switch__loading":t.loading}),type:"checkbox","aria-label":t.hideLabel?t.label:void 0,disabled:t.disabled||t.loading,required:t.required},null,10,ut),[[e.vModelCheckbox,s.value]]),e.createElementVNode("span",dt,[e.createElementVNode("span",pt,[t.loading?(e.openBlock(),e.createBlock(e.unref(k),{key:0,class:"onyx-switch__spinner",type:"circle"})):(e.openBlock(),e.createBlock(e.unref(v),{key:1,icon:s.value?e.unref(rt):e.unref(st),size:"24px"},null,8,["icon"]))])]),t.hideLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(["onyx-switch__label",[`onyx-truncation-${t.truncation}`,e.unref(a)]])},e.toDisplayString(t.label),3))],10,it))}}),yt=Object.keys(g.validations.typeMismatch),ft={key:0,class:"onyx-test-input__error","aria-live":"polite"},_t={class:"onyx-test-input__info"},kt=e.defineComponent({__name:"TestInput",props:{modelValue:{default:""},label:{default:""},errorMessage:{},required:{type:Boolean},pattern:{},type:{default:"text"},max:{},maxLength:{},min:{},step:{},minLength:{}},emits:["update:modelValue","change","validityChange"],setup(o,{emit:n}){var m;const t=o,l=n,{t:a}=C(),{errorMessage:i}=e.toRefs(t),c=e.ref(!1),r=e.ref(null),u=e.ref((m=r.value)==null?void 0:m.validity),s=e.computed({get:()=>t.modelValue,set:y=>l("update:modelValue",y)}),p=e.computed(()=>{if(!u.value||u.value.valid)return"";const y=at(u.value);if(t.errorMessage||y==="customError")return t.errorMessage;if(!y)return"";if(y==="typeMismatch"){const f=yt.includes(t.type)?t.type:"generic";return a.value(`validations.typeMismatch.${f}`,{value:s.value})}return a.value(`validations.${y}`,{value:s.value,n:s.value.toString().length,minLength:t.minLength,maxLength:t.maxLength,min:t.min,max:t.max,step:t.step})}),d=y=>{const f=y.target;l("change",f.value)};return e.watch([r,i],()=>{r.value&&r.value.setCustomValidity(t.errorMessage||"")}),e.watch([r,s,i],()=>{if(!r.value)return;const y=z(r.value.validity);(!u.value||!M(y,u.value))&&(u.value=y,l("validityChange",u.value))},{immediate:!0}),(y,f)=>{var h,S;return e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass(["onyx-test-input",{"onyx-test-input--touched":c.value}])},[e.createElementVNode("span",{class:e.normalizeClass(["onyx-test-input__label",{"onyx-test-input__label--required":t.required}])},e.toDisplayString(t.label),3),e.withDirectives(e.createElementVNode("input",e.mergeProps(t,{ref_key:"inputElement",ref:r,"onUpdate:modelValue":f[0]||(f[0]=O=>s.value=O),onChange:d,onBlur:f[1]||(f[1]=O=>c.value=!0)}),null,16),[[e.vModelDynamic,s.value]]),c.value&&!((h=u.value)!=null&&h.valid)?(e.openBlock(),e.createElementBlock("p",ft,e.toDisplayString(p.value),1)):e.createCommentVNode("",!0),e.createElementVNode("p",_t,' Model value: "'+e.toDisplayString(s.value)+'", is valid: '+e.toDisplayString((S=u.value)==null?void 0:S.valid),1)],2)}}}),vt={class:"onyx-tooltip-wrapper"},ht=e.defineComponent({__name:"OnyxTooltip",props:{text:{},icon:{},color:{default:"neutral"},position:{default:"top"},fitParent:{type:Boolean,default:!1},open:{type:[Boolean,Object],default:"hover"}},setup(o){const n=o,{elements:{trigger:t,tooltip:l},state:{isVisible:a}}=Ee({open:e.computed(()=>n.open)});return(i,c)=>(e.openBlock(),e.createElementBlock("div",vt,[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(a)}]}),[n.icon?(e.openBlock(),e.createBlock(v,{key:0,icon:n.icon,size:"16px"},null,8,["icon"])):e.createCommentVNode("",!0),e.renderSlot(i.$slots,"tooltip",{},()=>[e.createElementVNode("span",null,e.toDisplayString(n.text),1)])],16),e.createElementVNode("div",e.normalizeProps(e.guardReactiveProps(e.unref(t))),[e.renderSlot(i.$slots,"default")],16)]))}}),xt=["top","bottom"],bt=["primary","secondary","neutral","danger","warning","success","info"],gt=["small","default","large"],Bt=["ellipsis","multiline"],Ct=["horizontal","vertical"],Et=o=>({install:n=>{ye(n,o.i18n);const t=n.runWithContext(()=>C());e.watchEffect(()=>Vt(t.t.value("optional")))}}),Vt=o=>globalThis.document.body.style.setProperty("--onyx-global-optional-text",o);exports.AUTOCAPITALIZE=Fe;exports.BUTTON_MODES=ue;exports.BUTTON_TYPES=ce;exports.BUTTON_VARIATIONS=ie;exports.DIRECTIONS=Ct;exports.HEADLINE_TYPES=we;exports.ICON_SIZES=Te;exports.INPUT_TYPES=Re;exports.LINK_TARGETS=Ke;exports.ONYX_COLORS=bt;exports.OnyxAppLayout=R;exports.OnyxButton=se;exports.OnyxCheckboxGroup=ge;exports.OnyxHeadline=V;exports.OnyxIcon=v;exports.OnyxIconButton=Ie;exports.OnyxInput=Ue;exports.OnyxLink=He;exports.OnyxListbox=Ne;exports.OnyxLoadingIndicator=k;exports.OnyxPageLayout=Qe;exports.OnyxRadioButtonGroup=lt;exports.OnyxSkeleton=_;exports.OnyxSwitch=mt;exports.OnyxTooltip=ht;exports.TEXT_SIZES=gt;exports.TOOLTIP_POSITIONS=xt;exports.TRUNCATION_TYPES=Bt;exports.TestInput=kt;exports.createOnyx=Et;
|