sit-onyx 1.0.0-alpha.39 → 1.0.0-alpha.41

package/dist/components/OnyxIconButton/OnyxIconButton.stories.d.ts

@@ -0,0 +1,57 @@
+import type { Meta } from "@storybook/vue3";
+import OnyxIconButton from "./OnyxIconButton.vue";
+/**
+ * The icon button is a special button which has no visual label.
+ */
+declare const meta: Meta<typeof OnyxIconButton>;
+export default meta;
+/**
+ * This example shows the button in primary variation
+ */
+export declare const Primary: {
+    args: {
+        label: string;
+        icon: string;
+    };
+};
+/**
+ * This example shows the button in secondary variation
+ */
+export declare const Secondary: {
+    args: {
+        label: string;
+        variation: "secondary";
+        icon: string;
+    };
+};
+/**
+ * This example shows the button in danger variation
+ */
+export declare const Danger: {
+    args: {
+        label: string;
+        variation: "danger";
+        icon: string;
+    };
+};
+/**
+ * This example shows the with some custom content
+ */
+export declare const Custom: {
+    args: {
+        label: string;
+        default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }>;
+    };
+};
+/**
+ * This example shows the button in danger variation
+ */
+export declare const Loading: {
+    args: {
+        label: string;
+        loading: true;
+        icon: string;
+    };
+};

package/dist/components/OnyxIconButton/OnyxIconButton.vue.d.ts

@@ -0,0 +1,50 @@
+import type { OnyxIconButtonProps } from "./types";
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<OnyxIconButtonProps>, {
+    disabled: boolean;
+    type: string;
+    variation: string;
+    size: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: () => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<OnyxIconButtonProps>, {
+    disabled: boolean;
+    type: string;
+    variation: string;
+    size: string;
+}>>> & {
+    onClick?: (() => any) | undefined;
+}, {
+    type: "button" | "submit" | "reset";
+    size: "12px" | "16px" | "24px" | "32px" | "48px" | "64px" | "96px";
+    disabled: boolean;
+    variation: "primary" | "secondary" | "danger";
+}, {}>, Readonly<{
+    /** Slot for an custom icon. Will have no effect if property `icon` is passed. */
+    default(props: Record<string, never>): unknown;
+}> & {
+    /** Slot for an custom icon. Will have no effect if property `icon` is passed. */
+    default(props: Record<string, never>): unknown;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/OnyxIconButton/types.d.ts

@@ -0,0 +1,34 @@
+import type { ButtonType, ButtonVariation } from "../OnyxButton/types";
+import type { IconSize } from "../OnyxIcon/types";
+export type OnyxIconButtonProps = {
+    /**
+     * The aria-label of the button.
+     */
+    label: string;
+    /**
+     * If the button should be disabled or not.
+     */
+    disabled?: boolean;
+    /**
+     * The button type.
+     */
+    type?: ButtonType;
+    /**
+     * The color of the button.
+     */
+    variation?: ButtonVariation;
+    /**
+     * When `true` shows an loading indicator instead of the actual icon.
+     * The button is disabled while loading is `true`.
+     */
+    loading?: boolean;
+    /**
+     * The icon which will be displayed. The custom content in the `default` won't have an effect if the `icon` property is set.
+     */
+    icon?: string;
+    /**
+     * Icon size. Pixel values will be translated to the according `rem` value by the base of `16px`=`1rem`.
+     * @default 24px
+     */
+    size?: IconSize;
+};

package/dist/components/OnyxInput/OnyxInput.vue.d.ts

@@ -27,9 +27,9 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     type: "search" | "text" | "email" | "password" | "tel" | "url";
     disabled: boolean;
     modelValue: string;
+    loading: boolean;
     autocapitalize: "none" | "sentences" | "words" | "characters";
     readonly: boolean;
-    loading: boolean;
 }, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),I={key:0,class:"onyx-app__nav"},M={class:"onyx-app__page"},z={key:1,class:"onyx-app__page-overlay"},P={key:2,class:"onyx-app__app-overlay"},q=e.defineComponent({__name:"OnyxAppLayout",props:{navBarAlignment:{default:"top"}},setup(n){const o=n,t=e.useSlots();return(l,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["onyx-app",{"onyx-app--horizontal":o.navBarAlignment==="left"}])},[e.unref(t).navBar?(e.openBlock(),e.createElementBlock("nav",I,[e.renderSlot(l.$slots,"navBar")])):e.createCommentVNode("",!0),e.createElementVNode("div",M,[e.renderSlot(l.$slots,"default")]),e.unref(t).pageOverlay?(e.openBlock(),e.createElementBlock("div",z,[e.renderSlot(l.$slots,"pageOverlay")])):e.createCommentVNode("",!0),e.unref(t).appOverlay?(e.openBlock(),e.createElementBlock("div",P,[e.renderSlot(l.$slots,"appOverlay")])):e.createCommentVNode("",!0)],2))}}),A=["innerHTML"],h=e.defineComponent({__name:"OnyxIcon",props:{icon:{},size:{default:"24px"},color:{default:"currentColor"}},setup(n){const o=n;return(t,l)=>(e.openBlock(),e.createElementBlock("figure",{class:e.normalizeClass(["onyx-icon",[o.size!=="24px"?`onyx-icon--${o.size}`:"",o.color!=="currentColor"?`onyx-icon--${o.color}`:""]]),"aria-hidden":"true",innerHTML:o.icon},null,10,A))}}),v=(n,o)=>{const t=n.__vccOpts||n;for(const[l,a]of o)t[l]=a;return t},U={},D={class:"onyx-skeleton"};function R(n,o){return e.openBlock(),e.createElementBlock("figure",D)}const f=v(U,[["render",R]]),Y=["disabled"],G={class:"onyx-button__label onyx-truncation-ellipsis"},F=e.defineComponent({__name:"OnyxButton",props:{label:{},disabled:{type:Boolean,default:!1},type:{default:"button"},variation:{default:"primary"},mode:{default:"default"},icon:{},skeleton:{type:Boolean,default:!1}},emits:["click"],setup(n,{emit:o}){const t=n,l=o;return(a,r)=>t.skeleton?(e.openBlock(),e.createBlock(f,{key:0,class:"onyx-button-skeleton"})):(e.openBlock(),e.createElementBlock("button",{key:1,class:e.normalizeClass(["onyx-button",[`onyx-button--${t.variation}`,`onyx-button--${t.mode}`]]),disabled:t.disabled,onClick:r[0]||(r[0]=u=>l("click"))},[t.icon?(e.openBlock(),e.createBlock(h,{key:0,icon:t.icon,size:"24px"},null,8,["icon"])):e.createCommentVNode("",!0),e.createElementVNode("span",G,e.toDisplayString(t.label),1)],10,Y))}}),H=["button","submit","reset"],j=["primary","secondary","danger"],X=["default","outline","plain"],Z="(optional)",K={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.'}},J="Select all",x={optional:Z,validations:K,selectAll:J},S=Symbol(),N=n=>{const o=e.computed(()=>e.unref(n==null?void 0:n.locale)??"en-US"),t=e.computed(()=>n!=null&&n.messages&&o.value in n.messages?n.messages[o.value]:x),l=e.computed(()=>(a,r={})=>{let u=C(a,t.value)??C(a,x)??"";const s=typeof r.n=="number"?r.n:void 0;return u=Q(u,s),ee(u,r)});return{locale:o,t:l}},W=(n,o)=>n.provide(S,N(o)),g=()=>e.inject(S,()=>N(),!0),C=(n,o)=>{const t=n.split(".").reduce((l,a)=>!l||typeof l=="string"?l:l[a],o);return t&&typeof t=="string"?t:void 0},Q=(n,o)=>{const t=n.split(" | ").map(a=>a.trim());if(t.length<=1)return n;let l=1;return o===0&&(l=0),o&&(o<=0||o>1)&&(l=2),t.length===2?l===1?t[0]:t[1]:t[l]},ee=(n,o)=>o?Object.entries(o).reduce((l,[a,r])=>r===void 0?l:l.replace(new RegExp(`{${a}}`,"gi"),r.toString()),n).replace(/\s?{.*}\s?/gi,""):n,te={key:0,class:"onyx-checkbox-skeleton"},oe={class:"onyx-checkbox__container"},ne=["aria-label","indeterminate","disabled","required"],k=e.defineComponent({__name:"OnyxCheckbox",props:{modelValue:{type:Boolean,default:!1},label:{},indeterminate:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},required:{type:Boolean,default:!1},hideLabel:{type:Boolean},truncation:{default:"ellipsis"},skeleton:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(n,{emit:o}){const t=n,l=o,a=e.computed({get:()=>t.modelValue,set:s=>l("update:modelValue",s)}),r=e.ref(!1),u=e.computed(()=>t.hideLabel?"":`onyx-${t.required?"required":"optional"}-marker`);return(s,c)=>t.skeleton?(e.openBlock(),e.createElementBlock("div",te,[e.createVNode(f,{class:"onyx-checkbox-skeleton__input"}),t.hideLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(f,{key:0,class:"onyx-checkbox-skeleton__label"}))])):(e.openBlock(),e.createElementBlock("label",{key:1,class:e.normalizeClass(["onyx-checkbox",[u.value]])},[e.createElementVNode("div",oe,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":c[0]||(c[0]=i=>a.value=i),"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:c[1]||(c[1]=i=>r.value=!0)},null,42,ne),[[e.vModelCheckbox,a.value]])]),t.hideLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("p",{key:0,class:e.normalizeClass(["onyx-checkbox__label",[`onyx-truncation-${t.truncation}`]])},e.toDisplayString(t.label),3))],2))}}),le=["disabled"],ae={key:0,class:"onyx-checkbox-group__label"},re=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(n,{emit:o}){const t=n,l=o,{t:a}=g(),r=(i,p)=>{const d=p?[...t.modelValue,i]:t.modelValue.filter(_=>_!==i);l("update:modelValue",d)},u=e.computed(()=>t.options.filter(i=>!i.disabled&&!i.skeleton)),s=i=>{const p=i?u.value.map(({id:d})=>d):[];l("update:modelValue",p)},c=e.computed(()=>{const i=u.value.map(({id:d})=>d),p=t.modelValue.filter(d=>i.includes(d));return!i.length||!p.length?{modelValue:!1}:p.length===i.length?{modelValue:!0}:{indeterminate:!0,modelValue:!1}});return(i,p)=>(e.openBlock(),e.createElementBlock("fieldset",{class:"onyx-checkbox-group",disabled:t.disabled},[t.headline?(e.openBlock(),e.createElementBlock("legend",ae,[e.createVNode(e.unref(b),{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(k,e.mergeProps({key:0},c.value,{label:t.checkAllLabel||e.unref(a)("selectAll"),"onUpdate:modelValue":s}),null,16,["label"])):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,d=>(e.openBlock(),e.createBlock(k,e.mergeProps({key:d.id.toString()},d,{"model-value":t.modelValue.includes(d.id),"onUpdate:modelValue":_=>r(d.id,_)}),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(k,{key:d,label:`Skeleton ${d}`,skeleton:""},null,8,["label"]))),128))],2)],8,le))}}),se=["horizontal","vertical"],b=e.defineComponent({__name:"OnyxHeadline",props:{is:{},monospace:{type:Boolean,default:!1}},setup(n){const o=n;return(t,l)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.is),{class:e.normalizeClass(["onyx-headline",`onyx-headline--${o.is}`,o.monospace?"onyx-headline--monospace":""])},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},8,["class"]))}}),ce=["h1","h2","h3","h4","h5","h6"],ie=["12px","16px","24px","32px","48px","64px","96px"],ue={class:"onyx-input"},de={class:"onyx-input__label onyx-text--small onyx-truncation-ellipsis"},pe={class:"onyx-input__wrapper"},me=["placeholder","type","autocapitalize","autocomplete","autofocus","name","pattern","readonly","disabled"],_e=e.defineComponent({__name:"OnyxInput",props:{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}},emits:["update:modelValue","change","focus","blur"],setup(n,{emit:o}){const t=n,l=o,a=e.computed({get:()=>t.modelValue,set:s=>l("update:modelValue",s)}),r=s=>{const c=s.target.value;l("change",c)},u=e.computed(()=>t.pattern instanceof RegExp?t.pattern.source:t.pattern);return(s,c)=>(e.openBlock(),e.createElementBlock("label",ue,[e.createElementVNode("span",de,e.toDisplayString(t.label),1),e.createElementVNode("div",pe,[t.loading?(e.openBlock(),e.createBlock(e.unref(O),{key:0,class:"onyx-input__loading",type:"circle"})):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":c[0]||(c[0]=i=>a.value=i),class:"onyx-input__native",placeholder:t.placeholder,type:t.type,autocapitalize:t.autocapitalize,autocomplete:t.autocomplete,autofocus:t.autofocus,name:t.name,pattern:u.value,readonly:t.readonly,disabled:t.disabled||t.loading,onChange:r,onFocus:c[1]||(c[1]=i=>l("focus")),onBlur:c[2]||(c[2]=i=>l("blur"))},null,40,me),[[e.vModelDynamic,a.value]])])]))}}),ye=["email","password","search","tel","text","url"],fe=["none","sentences","words","characters"],he='<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>',ke=n=>/^http(s?):\/\//.test(n),xe=["href","target","rel"],ve=e.defineComponent({__name:"OnyxLink",props:{href:{},target:{default:"_self"},withExternalIcon:{type:[Boolean,String],default:"auto"}},emits:["click"],setup(n,{emit:o}){const t=n,l=o,a=e.computed(()=>t.withExternalIcon!=="auto"?t.withExternalIcon:ke(t.href));return(r,u)=>(e.openBlock(),e.createElementBlock("a",{class:"onyx-link",href:t.href,target:t.target,rel:t.target==="_blank"?"noreferrer":void 0,onClick:u[0]||(u[0]=s=>l("click"))},[e.renderSlot(r.$slots,"default"),a.value?(e.openBlock(),e.createBlock(h,{key:0,class:"onyx-link__icon",icon:e.unref(he),size:"16px"},null,8,["icon"])):e.createCommentVNode("",!0)],8,xe))}}),ge=["_self","_blank","_parent","_top"],be={},Be={class:"onyx-circle-spinner",viewBox:"0 0 50 50"},Ee=e.createElementVNode("circle",{class:"onyx-circle-spinner__circle",cx:"50%",cy:"50%",r:"45%"},null,-1),Ve=[Ee];function Ce(n,o){return e.openBlock(),e.createElementBlock("svg",Be,Ve)}const $e=v(be,[["render",Ce]]),Se={},Ne={class:"onyx-loading-dots"},Oe=e.createElementVNode("span",{class:"onyx-loading-dots__center"},null,-1),Te=[Oe];function we(n,o){return e.openBlock(),e.createElementBlock("div",Ne,Te)}const Le=v(Se,[["render",we]]),O=e.defineComponent({__name:"OnyxLoadingIndicator",props:{type:{default:"dots"}},setup(n){const o=n;return(t,l)=>o.type==="circle"?(e.openBlock(),e.createBlock($e,{key:0})):o.type==="dots"?(e.openBlock(),e.createBlock(Le,{key:1})):e.createCommentVNode("",!0)}}),Ie={key:0,class:"onyx-page__sidebar"},Me={class:"onyx-page__main"},ze={key:1,class:"onyx-page__footer"},Pe={key:2,class:"onyx-page__toasts"},qe=e.defineComponent({__name:"OnyxPageLayout",props:{footerAsideSidebar:{type:Boolean},hideSidebar:{type:Boolean}},setup(n){const o=n,t=e.useSlots(),l=e.computed(()=>{let a="";return!t.footer&&t.sidebar&&(a="onyx-page--side-main"),t.footer&&(!t.sidebar||o.hideSidebar)&&(a="onyx-page--main-footer"),t.footer&&t.sidebar&&(o.footerAsideSidebar?a="onyx-page--side-main-footer-partial":a="onyx-page--side-main-footer-full"),a});return(a,r)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["onyx-page",l.value])},[e.unref(t).sidebar&&!o.hideSidebar?(e.openBlock(),e.createElementBlock("aside",Ie,[e.renderSlot(a.$slots,"sidebar")])):e.createCommentVNode("",!0),e.createElementVNode("main",Me,[e.renderSlot(a.$slots,"default")]),e.unref(t).footer?(e.openBlock(),e.createElementBlock("footer",ze,[e.renderSlot(a.$slots,"footer")])):e.createCommentVNode("",!0),e.unref(t).toasts?(e.openBlock(),e.createElementBlock("div",Pe,[e.renderSlot(a.$slots,"toasts")])):e.createCommentVNode("",!0)],2))}}),Ae=(()=>{let n=0;return()=>n++})(),Ue=n=>`${n}-${Ae()}`,De={key:0,class:"onyx-radio-button-skeleton"},Re=["title"],Ye=["required","name","value","checked","disabled"],$=e.defineComponent({__name:"OnyxRadioButton",props:{id:{},label:{},value:{},disabled:{type:Boolean,default:!1},truncation:{default:"ellipsis"},skeleton:{type:Boolean},selected:{type:Boolean,default:!1},name:{},required:{type:Boolean,default:!1},errorMessage:{}},setup(n){const o=n,t=e.ref();return e.watchEffect(()=>{var l;return(l=t.value)==null?void 0:l.setCustomValidity(o.errorMessage??"")}),(l,a)=>o.skeleton?(e.openBlock(),e.createElementBlock("div",De,[e.createVNode(f,{class:"onyx-radio-button-skeleton__input"}),e.createVNode(f,{class:"onyx-radio-button-skeleton__label"})])):(e.openBlock(),e.createElementBlock("label",{key:1,class:"onyx-radio-button",title:o.errorMessage},[e.createElementVNode("input",{ref_key:"selectorRef",ref:t,class:"onyx-radio-button__selector",type:"radio",required:o.required,name:o.name,value:o.id,checked:o.selected,disabled:o.disabled},null,8,Ye),e.createElementVNode("span",{class:e.normalizeClass(["onyx-radio-button__label",[`onyx-truncation-${o.truncation}`]])},e.toDisplayString(o.label),3)],8,Re))}}),Ge=["disabled"],Fe={key:0,class:"onyx-radio-button-group__headline"},He=e.defineComponent({__name:"OnyxRadioButtonGroup",props:{name:{default:()=>Ue("radio-button-group-name")},modelValue:{},headline:{default:""},required:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},errorMessage:{default:""},direction:{default:"vertical"},options:{},skeleton:{}},emits:["update:modelValue"],setup(n,{emit:o}){const t=n,l=o,a=r=>l("update:modelValue",t.options.find(({id:u})=>r.target.value===u));return(r,u)=>(e.openBlock(),e.createElementBlock("fieldset",{class:"onyx-radio-button-group",disabled:t.disabled,onChange:u[0]||(u[0]=s=>a(s))},[t.headline?(e.openBlock(),e.createElementBlock("legend",Fe,[e.createVNode(b,{is:"h3",class:e.normalizeClass({"onyx-required-marker":t.required,"onyx-optional-marker":!t.required})},{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,s=>{var c;return e.openBlock(),e.createBlock($,e.mergeProps({key:s.id},s,{name:t.name,"error-message":t.errorMessage,selected:s.id===((c=t.modelValue)==null?void 0:c.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,s=>(e.openBlock(),e.createBlock($,{id:`skeleton-${s}`,key:s,label:"Skeleton ${i}",name:t.name,skeleton:""},null,8,["id","name"]))),128))],2)],40,Ge))}}),T=(n,o)=>{const t=Object.entries(n).filter(([a,r])=>r!==void 0),l=Object.entries(o).filter(([a,r])=>r!==void 0);return t.length!==l.length?!1:t.every(([a,r])=>r===o[a])},w=()=>Object.entries(Object.getOwnPropertyDescriptors(ValidityState.prototype)).filter(([n,o])=>o.enumerable).map(([n])=>n),L=n=>w().reduce((o,t)=>(o[t]=n[t],o),{}),je=n=>{if(n.valueMissing)return"valueMissing";const o=w().filter(t=>t!=="valid").sort();for(const t of o)if(t in n&&n[t])return t},Xe='<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>',Ze='<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>',Ke={key:0,class:"onyx-switch-skeleton"},Je=["aria-label","disabled","required"],We={class:"onyx-switch__container"},Qe={class:"onyx-switch__icon"},et=e.defineComponent({__name:"OnyxSwitch",props:{modelValue:{type:Boolean,default:!1},label:{},disabled:{type:Boolean,default:!1},required:{type:Boolean,default:!1},errorMessage:{},hideLabel:{type:Boolean},truncation:{default:"ellipsis"},skeleton:{type:Boolean,default:!1}},emits:["update:modelValue","validityChange"],setup(n,{emit:o}){var i;const t=n,l=o,{errorMessage:a}=e.toRefs(t),r=e.ref(),u=e.ref((i=r.value)==null?void 0:i.validity),s=e.computed({get:()=>t.modelValue,set:p=>{l("update:modelValue",p)}});e.watch([r,a],()=>{r.value&&r.value.setCustomValidity(t.errorMessage||"")}),e.watch([r,s,a],()=>{if(!r.value)return;const p=L(r.value.validity);(!u.value||!T(p,u.value))&&(u.value=p,l("validityChange",u.value))},{immediate:!0});const c=e.computed(()=>t.hideLabel?"":`onyx-${t.required?"required":"optional"}-marker`);return(p,d)=>t.skeleton?(e.openBlock(),e.createElementBlock("div",Ke,[e.createVNode(f,{class:"onyx-switch-skeleton__input"}),t.hideLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(f,{key:0,class:"onyx-switch-skeleton__label"}))])):(e.openBlock(),e.createElementBlock("label",{key:1,class:e.normalizeClass(["onyx-switch",[c.value]])},[e.withDirectives(e.createElementVNode("input",{ref_key:"inputElement",ref:r,"onUpdate:modelValue":d[0]||(d[0]=_=>s.value=_),class:"onyx-switch__input",type:"checkbox","aria-label":t.hideLabel?t.label:void 0,disabled:t.disabled,required:t.required},null,8,Je),[[e.vModelCheckbox,s.value]]),e.createElementVNode("span",We,[e.createElementVNode("span",Qe,[e.createVNode(e.unref(h),{icon:s.value?e.unref(Xe):e.unref(Ze),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.toDisplayString(t.label),3))],2))}}),tt=Object.keys(x.validations.typeMismatch),ot={key:0,class:"onyx-test-input__error","aria-live":"polite"},nt={class:"onyx-test-input__info"},lt=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(n,{emit:o}){var _;const t=n,l=o,{t:a}=g(),{errorMessage:r}=e.toRefs(t),u=e.ref(!1),s=e.ref(null),c=e.ref((_=s.value)==null?void 0:_.validity),i=e.computed({get:()=>t.modelValue,set:m=>l("update:modelValue",m)}),p=e.computed(()=>{if(!c.value||c.value.valid)return"";const m=je(c.value);if(t.errorMessage||m==="customError")return t.errorMessage;if(!m)return"";if(m==="typeMismatch"){const y=tt.includes(t.type)?t.type:"generic";return a.value(`validations.typeMismatch.${y}`,{value:i.value})}return a.value(`validations.${m}`,{value:i.value,n:i.value.toString().length,minLength:t.minLength,maxLength:t.maxLength,min:t.min,max:t.max,step:t.step})}),d=m=>{const y=m.target;l("change",y.value)};return e.watch([s,r],()=>{s.value&&s.value.setCustomValidity(t.errorMessage||"")}),e.watch([s,i,r],()=>{if(!s.value)return;const m=L(s.value.validity);(!c.value||!T(m,c.value))&&(c.value=m,l("validityChange",c.value))},{immediate:!0}),(m,y)=>{var B,E;return e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass(["onyx-test-input",{"onyx-test-input--touched":u.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:s,"onUpdate:modelValue":y[0]||(y[0]=V=>i.value=V),onChange:d,onBlur:y[1]||(y[1]=V=>u.value=!0)}),null,16),[[e.vModelDynamic,i.value]]),u.value&&!((B=c.value)!=null&&B.valid)?(e.openBlock(),e.createElementBlock("p",ot,e.toDisplayString(p.value),1)):e.createCommentVNode("",!0),e.createElementVNode("p",nt,' Model value: "'+e.toDisplayString(i.value)+'", is valid: '+e.toDisplayString((E=c.value)==null?void 0:E.valid),1)],2)}}}),at=["primary","secondary","neutral","danger","warning","success","info"],rt=["small","default","large"],st=["ellipsis","multiline"],ct=n=>({install:o=>{W(o,n.i18n);const t=o.runWithContext(()=>g());e.watchEffect(()=>it(t.t.value("optional")))}}),it=n=>globalThis.document.body.style.setProperty("--onyx-global-optional-text",n);exports.AUTOCAPITALIZE=fe;exports.BUTTON_MODES=X;exports.BUTTON_TYPES=H;exports.BUTTON_VARIATIONS=j;exports.CHECKBOX_GROUP_DIRECTIONS=se;exports.HEADLINE_TYPES=ce;exports.ICON_SIZES=ie;exports.INPUT_TYPES=ye;exports.LINK_TARGETS=ge;exports.ONYX_COLORS=at;exports.OnyxAppLayout=q;exports.OnyxButton=F;exports.OnyxCheckboxGroup=re;exports.OnyxHeadline=b;exports.OnyxIcon=h;exports.OnyxInput=_e;exports.OnyxLink=ve;exports.OnyxLoadingIndicator=O;exports.OnyxPageLayout=qe;exports.OnyxRadioButtonGroup=He;exports.OnyxSkeleton=f;exports.OnyxSwitch=et;exports.TEXT_SIZES=rt;exports.TRUNCATION_TYPES=st;exports.TestInput=lt;exports.createOnyx=ct;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),I={key:0,class:"onyx-app__nav"},z={class:"onyx-app__page"},M={key:1,class:"onyx-app__page-overlay"},P={key:2,class:"onyx-app__app-overlay"},q=e.defineComponent({__name:"OnyxAppLayout",props:{navBarAlignment:{default:"top"}},setup(n){const o=n,t=e.useSlots();return(l,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["onyx-app",{"onyx-app--horizontal":o.navBarAlignment==="left"}])},[e.unref(t).navBar?(e.openBlock(),e.createElementBlock("nav",I,[e.renderSlot(l.$slots,"navBar")])):e.createCommentVNode("",!0),e.createElementVNode("div",z,[e.renderSlot(l.$slots,"default")]),e.unref(t).pageOverlay?(e.openBlock(),e.createElementBlock("div",M,[e.renderSlot(l.$slots,"pageOverlay")])):e.createCommentVNode("",!0),e.unref(t).appOverlay?(e.openBlock(),e.createElementBlock("div",P,[e.renderSlot(l.$slots,"appOverlay")])):e.createCommentVNode("",!0)],2))}}),A=["innerHTML"],h=e.defineComponent({__name:"OnyxIcon",props:{icon:{},size:{default:"24px"},color:{default:"currentColor"}},setup(n){const o=n;return(t,l)=>(e.openBlock(),e.createElementBlock("figure",{class:e.normalizeClass(["onyx-icon",[o.size!=="24px"?`onyx-icon--${o.size}`:"",o.color!=="currentColor"?`onyx-icon--${o.color}`:""]]),"aria-hidden":"true",innerHTML:o.icon},null,10,A))}}),v=(n,o)=>{const t=n.__vccOpts||n;for(const[l,a]of o)t[l]=a;return t},U={},D={class:"onyx-skeleton"};function R(n,o){return e.openBlock(),e.createElementBlock("figure",D)}const f=v(U,[["render",R]]),Y=["disabled"],G={class:"onyx-button__label onyx-truncation-ellipsis"},F=e.defineComponent({__name:"OnyxButton",props:{label:{},disabled:{type:Boolean,default:!1},type:{default:"button"},variation:{default:"primary"},mode:{default:"default"},icon:{},skeleton:{type:Boolean,default:!1}},emits:["click"],setup(n,{emit:o}){const t=n,l=o;return(a,r)=>t.skeleton?(e.openBlock(),e.createBlock(f,{key:0,class:"onyx-button-skeleton"})):(e.openBlock(),e.createElementBlock("button",{key:1,class:e.normalizeClass(["onyx-button",[`onyx-button--${t.variation}`,`onyx-button--${t.mode}`]]),disabled:t.disabled,onClick:r[0]||(r[0]=u=>l("click"))},[t.icon?(e.openBlock(),e.createBlock(h,{key:0,icon:t.icon,size:"24px"},null,8,["icon"])):e.createCommentVNode("",!0),e.createElementVNode("span",G,e.toDisplayString(t.label),1)],10,Y))}}),H=["button","submit","reset"],j=["primary","secondary","danger"],X=["default","outline","plain"],Z="(optional)",K={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.'}},J="Select all",x={optional:Z,validations:K,selectAll:J},O=Symbol(),N=n=>{const o=e.computed(()=>e.unref(n==null?void 0:n.locale)??"en-US"),t=e.computed(()=>n!=null&&n.messages&&o.value in n.messages?n.messages[o.value]:x),l=e.computed(()=>(a,r={})=>{let u=$(a,t.value)??$(a,x)??"";const s=typeof r.n=="number"?r.n:void 0;return u=Q(u,s),ee(u,r)});return{locale:o,t:l}},W=(n,o)=>n.provide(O,N(o)),g=()=>e.inject(O,()=>N(),!0),$=(n,o)=>{const t=n.split(".").reduce((l,a)=>!l||typeof l=="string"?l:l[a],o);return t&&typeof t=="string"?t:void 0},Q=(n,o)=>{const t=n.split(" | ").map(a=>a.trim());if(t.length<=1)return n;let l=1;return o===0&&(l=0),o&&(o<=0||o>1)&&(l=2),t.length===2?l===1?t[0]:t[1]:t[l]},ee=(n,o)=>o?Object.entries(o).reduce((l,[a,r])=>r===void 0?l:l.replace(new RegExp(`{${a}}`,"gi"),r.toString()),n).replace(/\s?{.*}\s?/gi,""):n,te={key:0,class:"onyx-checkbox-skeleton"},oe={class:"onyx-checkbox__container"},ne=["aria-label","indeterminate","disabled","required"],k=e.defineComponent({__name:"OnyxCheckbox",props:{modelValue:{type:Boolean,default:!1},label:{},indeterminate:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},required:{type:Boolean,default:!1},hideLabel:{type:Boolean},truncation:{default:"ellipsis"},skeleton:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(n,{emit:o}){const t=n,l=o,a=e.computed({get:()=>t.modelValue,set:s=>l("update:modelValue",s)}),r=e.ref(!1),u=e.computed(()=>t.hideLabel?"":`onyx-${t.required?"required":"optional"}-marker`);return(s,c)=>t.skeleton?(e.openBlock(),e.createElementBlock("div",te,[e.createVNode(f,{class:"onyx-checkbox-skeleton__input"}),t.hideLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(f,{key:0,class:"onyx-checkbox-skeleton__label"}))])):(e.openBlock(),e.createElementBlock("label",{key:1,class:e.normalizeClass(["onyx-checkbox",[u.value]])},[e.createElementVNode("div",oe,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":c[0]||(c[0]=i=>a.value=i),"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:c[1]||(c[1]=i=>r.value=!0)},null,42,ne),[[e.vModelCheckbox,a.value]])]),t.hideLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("p",{key:0,class:e.normalizeClass(["onyx-checkbox__label",[`onyx-truncation-${t.truncation}`]])},e.toDisplayString(t.label),3))],2))}}),le=["disabled"],ae={key:0,class:"onyx-checkbox-group__label"},re=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(n,{emit:o}){const t=n,l=o,{t:a}=g(),r=(i,p)=>{const d=p?[...t.modelValue,i]:t.modelValue.filter(y=>y!==i);l("update:modelValue",d)},u=e.computed(()=>t.options.filter(i=>!i.disabled&&!i.skeleton)),s=i=>{const p=i?u.value.map(({id:d})=>d):[];l("update:modelValue",p)},c=e.computed(()=>{const i=u.value.map(({id:d})=>d),p=t.modelValue.filter(d=>i.includes(d));return!i.length||!p.length?{modelValue:!1}:p.length===i.length?{modelValue:!0}:{indeterminate:!0,modelValue:!1}});return(i,p)=>(e.openBlock(),e.createElementBlock("fieldset",{class:"onyx-checkbox-group",disabled:t.disabled},[t.headline?(e.openBlock(),e.createElementBlock("legend",ae,[e.createVNode(e.unref(b),{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(k,e.mergeProps({key:0},c.value,{label:t.checkAllLabel||e.unref(a)("selectAll"),"onUpdate:modelValue":s}),null,16,["label"])):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,d=>(e.openBlock(),e.createBlock(k,e.mergeProps({key:d.id.toString()},d,{"model-value":t.modelValue.includes(d.id),"onUpdate:modelValue":y=>r(d.id,y)}),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(k,{key:d,label:`Skeleton ${d}`,skeleton:""},null,8,["label"]))),128))],2)],8,le))}}),se=["horizontal","vertical"],b=e.defineComponent({__name:"OnyxHeadline",props:{is:{},monospace:{type:Boolean,default:!1}},setup(n){const o=n;return(t,l)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.is),{class:e.normalizeClass(["onyx-headline",`onyx-headline--${o.is}`,o.monospace?"onyx-headline--monospace":""])},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},8,["class"]))}}),ce=["h1","h2","h3","h4","h5","h6"],ie=["12px","16px","24px","32px","48px","64px","96px"],ue={},de={class:"onyx-circle-spinner",viewBox:"0 0 50 50"},pe=e.createElementVNode("circle",{class:"onyx-circle-spinner__circle",cx:"50%",cy:"50%",r:"45%"},null,-1),me=[pe];function ye(n,o){return e.openBlock(),e.createElementBlock("svg",de,me)}const _e=v(ue,[["render",ye]]),fe={},he={class:"onyx-loading-dots"},ke=e.createElementVNode("span",{class:"onyx-loading-dots__center"},null,-1),xe=[ke];function ve(n,o){return e.openBlock(),e.createElementBlock("div",he,xe)}const ge=v(fe,[["render",ve]]),B=e.defineComponent({__name:"OnyxLoadingIndicator",props:{type:{default:"dots"}},setup(n){const o=n;return(t,l)=>o.type==="circle"?(e.openBlock(),e.createBlock(_e,{key:0})):o.type==="dots"?(e.openBlock(),e.createBlock(ge,{key:1})):e.createCommentVNode("",!0)}}),be=["aria-label","disabled"],Be=e.defineComponent({__name:"OnyxIconButton",props:{label:{},disabled:{type:Boolean,default:!1},type:{default:"button"},variation:{default:"primary"},loading:{type:Boolean},icon:{},size:{default:"24px"}},emits:["click"],setup(n,{emit:o}){const t=n,l=o;return(a,r)=>(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:r[0]||(r[0]=u=>l("click"))},[t.loading?(e.openBlock(),e.createBlock(B,{key:0,type:"circle"})):t.icon?(e.openBlock(),e.createBlock(h,{key:1,icon:t.icon,size:t.size},null,8,["icon","size"])):e.renderSlot(a.$slots,"default",{key:2})],10,be))}}),Ee={class:"onyx-input"},Ve={class:"onyx-input__label onyx-text--small onyx-truncation-ellipsis"},Ce={class:"onyx-input__wrapper"},$e=["placeholder","type","autocapitalize","autocomplete","autofocus","name","pattern","readonly","disabled"],Se=e.defineComponent({__name:"OnyxInput",props:{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}},emits:["update:modelValue","change","focus","blur"],setup(n,{emit:o}){const t=n,l=o,a=e.computed({get:()=>t.modelValue,set:s=>l("update:modelValue",s)}),r=s=>{const c=s.target.value;l("change",c)},u=e.computed(()=>t.pattern instanceof RegExp?t.pattern.source:t.pattern);return(s,c)=>(e.openBlock(),e.createElementBlock("label",Ee,[e.createElementVNode("span",Ve,e.toDisplayString(t.label),1),e.createElementVNode("div",Ce,[t.loading?(e.openBlock(),e.createBlock(e.unref(B),{key:0,class:"onyx-input__loading",type:"circle"})):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":c[0]||(c[0]=i=>a.value=i),class:"onyx-input__native",placeholder:t.placeholder,type:t.type,autocapitalize:t.autocapitalize,autocomplete:t.autocomplete,autofocus:t.autofocus,name:t.name,pattern:u.value,readonly:t.readonly,disabled:t.disabled||t.loading,onChange:r,onFocus:c[1]||(c[1]=i=>l("focus")),onBlur:c[2]||(c[2]=i=>l("blur"))},null,40,$e),[[e.vModelDynamic,a.value]])])]))}}),Oe=["email","password","search","tel","text","url"],Ne=["none","sentences","words","characters"],Te='<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>',we=n=>/^http(s?):\/\//.test(n),Le=["href","target","rel"],Ie=e.defineComponent({__name:"OnyxLink",props:{href:{},target:{default:"_self"},withExternalIcon:{type:[Boolean,String],default:"auto"}},emits:["click"],setup(n,{emit:o}){const t=n,l=o,a=e.computed(()=>t.withExternalIcon!=="auto"?t.withExternalIcon:we(t.href));return(r,u)=>(e.openBlock(),e.createElementBlock("a",{class:"onyx-link",href:t.href,target:t.target,rel:t.target==="_blank"?"noreferrer":void 0,onClick:u[0]||(u[0]=s=>l("click"))},[e.renderSlot(r.$slots,"default"),a.value?(e.openBlock(),e.createBlock(h,{key:0,class:"onyx-link__icon",icon:e.unref(Te),size:"16px"},null,8,["icon"])):e.createCommentVNode("",!0)],8,Le))}}),ze=["_self","_blank","_parent","_top"],Me={key:0,class:"onyx-page__sidebar"},Pe={class:"onyx-page__main"},qe={key:1,class:"onyx-page__footer"},Ae={key:2,class:"onyx-page__toasts"},Ue=e.defineComponent({__name:"OnyxPageLayout",props:{footerAsideSidebar:{type:Boolean},hideSidebar:{type:Boolean}},setup(n){const o=n,t=e.useSlots(),l=e.computed(()=>{let a="";return!t.footer&&t.sidebar&&(a="onyx-page--side-main"),t.footer&&(!t.sidebar||o.hideSidebar)&&(a="onyx-page--main-footer"),t.footer&&t.sidebar&&(o.footerAsideSidebar?a="onyx-page--side-main-footer-partial":a="onyx-page--side-main-footer-full"),a});return(a,r)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["onyx-page",l.value])},[e.unref(t).sidebar&&!o.hideSidebar?(e.openBlock(),e.createElementBlock("aside",Me,[e.renderSlot(a.$slots,"sidebar")])):e.createCommentVNode("",!0),e.createElementVNode("main",Pe,[e.renderSlot(a.$slots,"default")]),e.unref(t).footer?(e.openBlock(),e.createElementBlock("footer",qe,[e.renderSlot(a.$slots,"footer")])):e.createCommentVNode("",!0),e.unref(t).toasts?(e.openBlock(),e.createElementBlock("div",Ae,[e.renderSlot(a.$slots,"toasts")])):e.createCommentVNode("",!0)],2))}}),De=(()=>{let n=0;return()=>n++})(),Re=n=>`${n}-${De()}`,Ye={key:0,class:"onyx-radio-button-skeleton"},Ge=["title"],Fe=["required","name","value","checked","disabled"],S=e.defineComponent({__name:"OnyxRadioButton",props:{id:{},label:{},value:{},disabled:{type:Boolean,default:!1},truncation:{default:"ellipsis"},skeleton:{type:Boolean},selected:{type:Boolean,default:!1},name:{},required:{type:Boolean,default:!1},errorMessage:{}},setup(n){const o=n,t=e.ref();return e.watchEffect(()=>{var l;return(l=t.value)==null?void 0:l.setCustomValidity(o.errorMessage??"")}),(l,a)=>o.skeleton?(e.openBlock(),e.createElementBlock("div",Ye,[e.createVNode(f,{class:"onyx-radio-button-skeleton__input"}),e.createVNode(f,{class:"onyx-radio-button-skeleton__label"})])):(e.openBlock(),e.createElementBlock("label",{key:1,class:"onyx-radio-button",title:o.errorMessage},[e.createElementVNode("input",{ref_key:"selectorRef",ref:t,class:"onyx-radio-button__selector",type:"radio",required:o.required,name:o.name,value:o.id,checked:o.selected,disabled:o.disabled},null,8,Fe),e.createElementVNode("span",{class:e.normalizeClass(["onyx-radio-button__label",[`onyx-truncation-${o.truncation}`]])},e.toDisplayString(o.label),3)],8,Ge))}}),He=["disabled"],je={key:0,class:"onyx-radio-button-group__headline"},Xe=e.defineComponent({__name:"OnyxRadioButtonGroup",props:{name:{default:()=>Re("radio-button-group-name")},modelValue:{},headline:{default:""},required:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},errorMessage:{default:""},direction:{default:"vertical"},options:{},skeleton:{}},emits:["update:modelValue"],setup(n,{emit:o}){const t=n,l=o,a=r=>l("update:modelValue",t.options.find(({id:u})=>r.target.value===u));return(r,u)=>(e.openBlock(),e.createElementBlock("fieldset",{class:"onyx-radio-button-group",disabled:t.disabled,onChange:u[0]||(u[0]=s=>a(s))},[t.headline?(e.openBlock(),e.createElementBlock("legend",je,[e.createVNode(b,{is:"h3",class:e.normalizeClass({"onyx-required-marker":t.required,"onyx-optional-marker":!t.required})},{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,s=>{var c;return e.openBlock(),e.createBlock(S,e.mergeProps({key:s.id},s,{name:t.name,"error-message":t.errorMessage,selected:s.id===((c=t.modelValue)==null?void 0:c.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,s=>(e.openBlock(),e.createBlock(S,{id:`skeleton-${s}`,key:s,label:"Skeleton ${i}",name:t.name,skeleton:""},null,8,["id","name"]))),128))],2)],40,He))}}),T=(n,o)=>{const t=Object.entries(n).filter(([a,r])=>r!==void 0),l=Object.entries(o).filter(([a,r])=>r!==void 0);return t.length!==l.length?!1:t.every(([a,r])=>r===o[a])},w=()=>Object.entries(Object.getOwnPropertyDescriptors(ValidityState.prototype)).filter(([n,o])=>o.enumerable).map(([n])=>n),L=n=>w().reduce((o,t)=>(o[t]=n[t],o),{}),Ze=n=>{if(n.valueMissing)return"valueMissing";const o=w().filter(t=>t!=="valid").sort();for(const t of o)if(t in n&&n[t])return t},Ke='<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>',Je='<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>',We={key:0,class:"onyx-switch-skeleton"},Qe=["aria-label","disabled","required"],et={class:"onyx-switch__container"},tt={class:"onyx-switch__icon"},ot=e.defineComponent({__name:"OnyxSwitch",props:{modelValue:{type:Boolean,default:!1},label:{},disabled:{type:Boolean,default:!1},required:{type:Boolean,default:!1},errorMessage:{},hideLabel:{type:Boolean},truncation:{default:"ellipsis"},skeleton:{type:Boolean,default:!1}},emits:["update:modelValue","validityChange"],setup(n,{emit:o}){var i;const t=n,l=o,{errorMessage:a}=e.toRefs(t),r=e.ref(),u=e.ref((i=r.value)==null?void 0:i.validity),s=e.computed({get:()=>t.modelValue,set:p=>{l("update:modelValue",p)}});e.watch([r,a],()=>{r.value&&r.value.setCustomValidity(t.errorMessage||"")}),e.watch([r,s,a],()=>{if(!r.value)return;const p=L(r.value.validity);(!u.value||!T(p,u.value))&&(u.value=p,l("validityChange",u.value))},{immediate:!0});const c=e.computed(()=>t.hideLabel?"":`onyx-${t.required?"required":"optional"}-marker`);return(p,d)=>t.skeleton?(e.openBlock(),e.createElementBlock("div",We,[e.createVNode(f,{class:"onyx-switch-skeleton__input"}),t.hideLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(f,{key:0,class:"onyx-switch-skeleton__label"}))])):(e.openBlock(),e.createElementBlock("label",{key:1,class:e.normalizeClass(["onyx-switch",[c.value]])},[e.withDirectives(e.createElementVNode("input",{ref_key:"inputElement",ref:r,"onUpdate:modelValue":d[0]||(d[0]=y=>s.value=y),class:"onyx-switch__input",type:"checkbox","aria-label":t.hideLabel?t.label:void 0,disabled:t.disabled,required:t.required},null,8,Qe),[[e.vModelCheckbox,s.value]]),e.createElementVNode("span",et,[e.createElementVNode("span",tt,[e.createVNode(e.unref(h),{icon:s.value?e.unref(Ke):e.unref(Je),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.toDisplayString(t.label),3))],2))}}),nt=Object.keys(x.validations.typeMismatch),lt={key:0,class:"onyx-test-input__error","aria-live":"polite"},at={class:"onyx-test-input__info"},rt=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(n,{emit:o}){var y;const t=n,l=o,{t:a}=g(),{errorMessage:r}=e.toRefs(t),u=e.ref(!1),s=e.ref(null),c=e.ref((y=s.value)==null?void 0:y.validity),i=e.computed({get:()=>t.modelValue,set:m=>l("update:modelValue",m)}),p=e.computed(()=>{if(!c.value||c.value.valid)return"";const m=Ze(c.value);if(t.errorMessage||m==="customError")return t.errorMessage;if(!m)return"";if(m==="typeMismatch"){const _=nt.includes(t.type)?t.type:"generic";return a.value(`validations.typeMismatch.${_}`,{value:i.value})}return a.value(`validations.${m}`,{value:i.value,n:i.value.toString().length,minLength:t.minLength,maxLength:t.maxLength,min:t.min,max:t.max,step:t.step})}),d=m=>{const _=m.target;l("change",_.value)};return e.watch([s,r],()=>{s.value&&s.value.setCustomValidity(t.errorMessage||"")}),e.watch([s,i,r],()=>{if(!s.value)return;const m=L(s.value.validity);(!c.value||!T(m,c.value))&&(c.value=m,l("validityChange",c.value))},{immediate:!0}),(m,_)=>{var E,V;return e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass(["onyx-test-input",{"onyx-test-input--touched":u.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:s,"onUpdate:modelValue":_[0]||(_[0]=C=>i.value=C),onChange:d,onBlur:_[1]||(_[1]=C=>u.value=!0)}),null,16),[[e.vModelDynamic,i.value]]),u.value&&!((E=c.value)!=null&&E.valid)?(e.openBlock(),e.createElementBlock("p",lt,e.toDisplayString(p.value),1)):e.createCommentVNode("",!0),e.createElementVNode("p",at,' Model value: "'+e.toDisplayString(i.value)+'", is valid: '+e.toDisplayString((V=c.value)==null?void 0:V.valid),1)],2)}}}),st=["primary","secondary","neutral","danger","warning","success","info"],ct=["small","default","large"],it=["ellipsis","multiline"],ut=n=>({install:o=>{W(o,n.i18n);const t=o.runWithContext(()=>g());e.watchEffect(()=>dt(t.t.value("optional")))}}),dt=n=>globalThis.document.body.style.setProperty("--onyx-global-optional-text",n);exports.AUTOCAPITALIZE=Ne;exports.BUTTON_MODES=X;exports.BUTTON_TYPES=H;exports.BUTTON_VARIATIONS=j;exports.CHECKBOX_GROUP_DIRECTIONS=se;exports.HEADLINE_TYPES=ce;exports.ICON_SIZES=ie;exports.INPUT_TYPES=Oe;exports.LINK_TARGETS=ze;exports.ONYX_COLORS=st;exports.OnyxAppLayout=q;exports.OnyxButton=F;exports.OnyxCheckboxGroup=re;exports.OnyxHeadline=b;exports.OnyxIcon=h;exports.OnyxIconButton=Be;exports.OnyxInput=Se;exports.OnyxLink=Ie;exports.OnyxLoadingIndicator=B;exports.OnyxPageLayout=Ue;exports.OnyxRadioButtonGroup=Xe;exports.OnyxSkeleton=f;exports.OnyxSwitch=ot;exports.TEXT_SIZES=ct;exports.TRUNCATION_TYPES=it;exports.TestInput=rt;exports.createOnyx=ut;

package/dist/index.d.ts

@@ -9,6 +9,8 @@ export { default as OnyxHeadline } from './components/OnyxHeadline/OnyxHeadline.
 export * from './components/OnyxHeadline/types';
 export { default as OnyxIcon } from './components/OnyxIcon/OnyxIcon.vue';
 export * from './components/OnyxIcon/types';
+export { default as OnyxIconButton } from './components/OnyxIconButton/OnyxIconButton.vue';
+export * from './components/OnyxIconButton/types';
 export { default as OnyxInput } from './components/OnyxInput/OnyxInput.vue';
 export * from './components/OnyxInput/types';
 export { default as OnyxLink } from './components/OnyxLink/OnyxLink.vue';