@directus-labs/card-select-interfaces/dist/app.js

A bundle of card-based selection interfaces for Directus

import*as e from"vue";import{Fragment as t,defineComponent as a,Comment as n,mergeProps as i,cloneVNode as r,h as o,openBlock as l,createBlock as d,unref as c,withCtx as s,renderSlot as u,getCurrentScope as v,onScopeDispose as p,toValue as f,watch as m,getCurrentInstance as h,ref as b,nextTick as y,computed as g,inject as w,provide as x,watchEffect as k,markRaw as _,toRefs as C,createVNode as S,createElementBlock as V,renderList as $,resolveDynamicComponent as A,createCommentVNode as I,onMounted as B,onUnmounted as E,withKeys as j,withModifiers as M,resolveComponent as L,createElementVNode as T,normalizeClass as q,toDisplayString as O,TransitionGroup as R,normalizeStyle as H,resolveDirective as z,createTextVNode as F,withDirectives as U}from"vue";import{useApi as P,defineInterface as Z}from"@directus/extensions-sdk";import{useI18n as N}from"vue-i18n";function K(e){return e?e.flatMap((e=>e.type===t?K(e.children):[e])):[]}const D=a({name:"PrimitiveSlot",inheritAttrs:!1,setup:(e,{attrs:t,slots:a})=>()=>{if(!a.default)return null;const e=K(a.default()),o=e.findIndex((e=>e.type!==n));if(-1===o)return e;const l=e[o];delete l.props?.ref;const d=l.props?i(t,l.props):t;t.class&&l.props?.class&&delete l.props.class;const c=r(l,d);for(const e in d)e.startsWith("on")&&(c.props||={},c.props[e]=d[e]);return 1===e.length?c:(e[o]=c,e)}}),G=a({name:"Primitive",inheritAttrs:!1,props:{asChild:{type:Boolean,default:!1},as:{type:[String,Object],default:"div"}},setup(e,{attrs:t,slots:a}){const n=e.asChild?"template":e.as;return"string"==typeof n&&["area","img","input"].includes(n)?()=>o(n,t):"template"!==n?()=>o(e.as,t,{default:a.default}):()=>o(D,t,{default:a.default})}}),W=a({__name:"VisuallyHidden",props:{feature:{default:"focusable"},asChild:{type:Boolean},as:{default:"span"}},setup:e=>(e,t)=>(l(),d(c(G),{as:e.as,"as-child":e.asChild,"aria-hidden":"focusable"===e.feature?"true":void 0,"data-hidden":"fully-hidden"===e.feature?"":void 0,tabindex:"fully-hidden"===e.feature?"-1":void 0,style:{position:"absolute",border:0,width:"1px",height:"1px",padding:0,margin:"-1px",overflow:"hidden",clip:"rect(0, 0, 0, 0)",clipPath:"inset(50%)",whiteSpace:"nowrap",wordWrap:"normal"}},{default:s((()=>[u(e.$slots,"default")])),_:3},8,["as","as-child","aria-hidden","data-hidden","tabindex"]))});const J="undefined"!=typeof window&&"undefined"!=typeof document;"undefined"!=typeof WorkerGlobalScope&&(globalThis,WorkerGlobalScope);const Y=Object.prototype.toString,Q=()=>{};function X(e){return Array.isArray(e)?e:[e]}const ee=f,te=J?window:void 0;function ae(e){var t;const a=f(e);return null!=(t=null==a?void 0:a.$el)?t:a}function ne(...e){let t,a,n,i;if("string"==typeof e[0]||Array.isArray(e[0])?([a,n,i]=e,t=te):[t,a,n,i]=e,!t)return Q;a=X(a),n=X(n);const r=[],o=()=>{r.forEach((e=>e())),r.length=0},l=m((()=>[ae(t),f(i)]),(([e,t])=>{if(o(),!e)return;const i=(l=t,"[object Object]"===Y.call(l)?{...t}:t);var l;r.push(...a.flatMap((t=>n.map((a=>((e,t,a,n)=>(e.addEventListener(t,a,n),()=>e.removeEventListener(t,a,n)))(e,t,a,i))))))}),{immediate:!0,flush:"post"}),d=()=>{l(),o()};var c;return c=d,v()&&p(c),d}function ie(e,t,a,n={}){var i,r,o;const{clone:l=!1,passive:d=!1,eventName:c,deep:s=!1,defaultValue:u,shouldEmit:v}=n,p=h(),f=a||(null==p?void 0:p.emit)||(null==(i=null==p?void 0:p.$emit)?void 0:i.bind(p))||(null==(o=null==(r=null==p?void 0:p.proxy)?void 0:r.$emit)?void 0:o.bind(null==p?void 0:p.proxy));let w=c;t||(t="modelValue"),w=w||`update:${t.toString()}`;const x=e=>{return l?"function"==typeof l?l(e):(t=e,JSON.parse(JSON.stringify(t))):e;var t},k=()=>void 0!==e[t]?x(e[t]):u,_=e=>{v?v(e)&&f(w,e):f(w,e)};if(d){const a=k(),n=b(a);let i=!1;return m((()=>e[t]),(e=>{i||(i=!0,n.value=x(e),y((()=>i=!1)))})),m(n,(a=>{i||a===e[t]&&!s||_(a)}),{deep:s}),n}return g({get:()=>k(),set(e){_(e)}})}const re=Object.freeze({ignoreUnknown:!1,respectType:!1,respectFunctionNames:!1,respectFunctionProperties:!1,unorderedObjects:!0,unorderedArrays:!1,unorderedSets:!1,excludeKeys:void 0,excludeValues:void 0,replacer:void 0});function oe(e,t){const a=de(t=t?{...re,...t}:re);return a.dispatch(e),a.toString()}const le=Object.freeze(["prototype","__proto__","constructor"]);function de(e){let t="",a=new Map;const n=e=>{t+=e};return{toString:()=>t,getContext:()=>a,dispatch(t){e.replacer&&(t=e.replacer(t));return this[null===t?"null":typeof t](t)},object(t){if(t&&"function"==typeof t.toJSON)return this.object(t.toJSON());const i=Object.prototype.toString.call(t);let r="";const o=i.length;r=o<10?"unknown:["+i+"]":i.slice(8,o-1),r=r.toLowerCase();let l=null;if(void 0!==(l=a.get(t)))return this.dispatch("[CIRCULAR:"+l+"]");if(a.set(t,a.size),"undefined"!=typeof Buffer&&Buffer.isBuffer&&Buffer.isBuffer(t))return n("buffer:"),n(t.toString("utf8"));if("object"!==r&&"function"!==r&&"asyncfunction"!==r)this[r]?this[r](t):e.ignoreUnknown||this.unkown(t,r);else{let a=Object.keys(t);e.unorderedObjects&&(a=a.sort());let i=[];!1===e.respectType||ue(t)||(i=le),e.excludeKeys&&(a=a.filter((t=>!e.excludeKeys(t))),i=i.filter((t=>!e.excludeKeys(t)))),n("object:"+(a.length+i.length)+":");const r=a=>{this.dispatch(a),n(":"),e.excludeValues||this.dispatch(t[a]),n(",")};for(const e of a)r(e);for(const e of i)r(e)}},array(t,i){if(i=void 0===i?!1!==e.unorderedArrays:i,n("array:"+t.length+":"),!i||t.length<=1){for(const e of t)this.dispatch(e);return}const r=new Map,o=t.map((t=>{const a=de(e);a.dispatch(t);for(const[e,t]of a.getContext())r.set(e,t);return a.toString()}));return a=r,o.sort(),this.array(o,!1)},date:e=>n("date:"+e.toJSON()),symbol:e=>n("symbol:"+e.toString()),unkown(e,t){if(n(t),e)return n(":"),e&&"function"==typeof e.entries?this.array(Array.from(e.entries()),!0):void 0},error:e=>n("error:"+e.toString()),boolean:e=>n("bool:"+e),string(e){n("string:"+e.length+":"),n(e)},function(t){n("fn:"),ue(t)?this.dispatch("[native]"):this.dispatch(t.toString()),!1!==e.respectFunctionNames&&this.dispatch("function-name:"+String(t.name)),e.respectFunctionProperties&&this.object(t)},number:e=>n("number:"+e),xml:e=>n("xml:"+e.toString()),null:()=>n("Null"),undefined:()=>n("Undefined"),regexp:e=>n("regex:"+e.toString()),uint8array(e){return n("uint8array:"),this.dispatch(Array.prototype.slice.call(e))},uint8clampedarray(e){return n("uint8clampedarray:"),this.dispatch(Array.prototype.slice.call(e))},int8array(e){return n("int8array:"),this.dispatch(Array.prototype.slice.call(e))},uint16array(e){return n("uint16array:"),this.dispatch(Array.prototype.slice.call(e))},int16array(e){return n("int16array:"),this.dispatch(Array.prototype.slice.call(e))},uint32array(e){return n("uint32array:"),this.dispatch(Array.prototype.slice.call(e))},int32array(e){return n("int32array:"),this.dispatch(Array.prototype.slice.call(e))},float32array(e){return n("float32array:"),this.dispatch(Array.prototype.slice.call(e))},float64array(e){return n("float64array:"),this.dispatch(Array.prototype.slice.call(e))},arraybuffer(e){return n("arraybuffer:"),this.dispatch(new Uint8Array(e))},url:e=>n("url:"+e.toString()),map(t){n("map:");const a=[...t];return this.array(a,!1!==e.unorderedSets)},set(t){n("set:");const a=[...t];return this.array(a,!1!==e.unorderedSets)},file(e){return n("file:"),this.dispatch([e.name,e.size,e.type,e.lastModfied])},blob(){if(e.ignoreUnknown)return n("[blob]");throw new Error('Hashing Blob objects is currently not supported\nUse "options.replacer" or "options.ignoreUnknown"\n')},domwindow:()=>n("domwindow"),bigint:e=>n("bigint:"+e.toString()),process:()=>n("process"),timer:()=>n("timer"),pipe:()=>n("pipe"),tcp:()=>n("tcp"),udp:()=>n("udp"),tty:()=>n("tty"),statwatcher:()=>n("statwatcher"),securecontext:()=>n("securecontext"),connection:()=>n("connection"),zlib:()=>n("zlib"),context:()=>n("context"),nodescript:()=>n("nodescript"),httpparser:()=>n("httpparser"),dataview:()=>n("dataview"),signal:()=>n("signal"),fsevent:()=>n("fsevent"),tlswrap:()=>n("tlswrap")}}const ce="[native code] }",se=ce.length;function ue(e){return"function"==typeof e&&Function.prototype.toString.call(e).slice(-se)===ce}function ve(e,t,a={}){return e===t||oe(e,a)===oe(t,a)}function pe(e){return null==e}function fe(e,t){return!pe(e)&&(Array.isArray(e)?e.some((e=>ve(e,t))):ve(e,t))}function me(e,t){const a=Symbol("string"!=typeof e||t?t:`${e}Context`);return[t=>{const n=w(a,t);if(n)return n;if(null===n)return n;throw new Error(`Injection \`${a.toString()}\` not found. Component must be used within ${Array.isArray(e)?`one of the following components: ${e.join(", ")}`:`\`${e}\``}`)},e=>(x(a,e),e)]}const[he,be]=me("ConfigProvider");function ye(e){const t=he({dir:b("ltr")});return g((()=>e?.value||t.dir?.value||"ltr"))}function ge(){const e=h(),t=b(),a=g((()=>["#text","#comment"].includes(t.value?.$el.nodeName)?t.value?.$el.nextElementSibling:ae(t))),n=Object.assign({},e.exposed),i={};for(const t in e.props)Object.defineProperty(i,t,{enumerable:!0,configurable:!0,get:()=>e.props[t]});if(Object.keys(n).length>0)for(const e in n)Object.defineProperty(i,e,{enumerable:!0,configurable:!0,get:()=>n[e]});return Object.defineProperty(i,"$el",{enumerable:!0,configurable:!0,get:()=>e.vnode.el}),e.exposed=i,{forwardRef:function(a){t.value=a,a instanceof Element||!a||(Object.defineProperty(i,"$el",{enumerable:!0,configurable:!0,get:()=>a.$el}),e.exposed=i)},currentRef:t,currentElement:a}}let we=0;function xe(){const e=b(),t=g((()=>["#text","#comment"].includes(e.value?.$el.nodeName)?e.value?.$el.nextElementSibling:ae(e)));return{primitiveElement:e,currentElement:t}}const ke={bubbles:!1,cancelable:!0},_e={ArrowLeft:"prev",ArrowUp:"prev",ArrowRight:"next",ArrowDown:"next",PageUp:"first",Home:"first",PageDown:"last",End:"last"};function Ce(e,t=!1,a){const n=a?.activeElement??document.activeElement;for(const a of e){if(a===n)return;if(a.focus({preventScroll:t}),document.activeElement!==n)return}}const Se="data-reka-collection-item";function Ve(e={}){const{key:t="",isProvider:n=!1}=e,i=`${t}CollectionProvider`;let r;if(n){const e=b(new Map),t=b();r={collectionRef:t,itemMap:e},x(i,r)}else r=w(i);const l=a({name:"CollectionSlot",setup(e,{slots:t}){const{primitiveElement:a,currentElement:n}=xe();return m(n,(()=>{r.collectionRef.value=n.value})),()=>o(D,{ref:a},t)}}),d=a({name:"CollectionItem",inheritAttrs:!1,props:{value:{validator:()=>!0}},setup(e,{slots:t,attrs:a}){const{primitiveElement:n,currentElement:i}=xe();return k((t=>{if(i.value){const a=_(i.value);r.itemMap.value.set(a,{ref:i.value,value:e.value}),t((()=>r.itemMap.value.delete(a)))}})),()=>o(D,{...a,[Se]:"",ref:n},t)}});return{getItems:(e=!1)=>{const t=r.collectionRef.value;if(!t)return[];const a=Array.from(t.querySelectorAll(`[${Se}]`)),n=Array.from(r.itemMap.value.values()).sort(((e,t)=>a.indexOf(e.ref)-a.indexOf(t.ref)));return e?n:n.filter((e=>""!==e.ref.dataset.disabled))},reactiveItems:g((()=>Array.from(r.itemMap.value.values()))),itemMapSize:g((()=>r.itemMap.value.size)),CollectionSlot:l,CollectionItem:d}}const[$e,Ae]=me("RovingFocusGroup"),Ie=a({__name:"RovingFocusGroup",props:{orientation:{default:void 0},dir:{},loop:{type:Boolean,default:!1},currentTabStopId:{},defaultCurrentTabStopId:{},preventScrollOnEntryFocus:{type:Boolean,default:!1},asChild:{type:Boolean},as:{}},emits:["entryFocus","update:currentTabStopId"],setup(e,{expose:t,emit:a}){const n=e,i=a,{loop:r,orientation:o,dir:v}=C(n),p=ye(v),f=ie(n,"currentTabStopId",i,{defaultValue:n.defaultCurrentTabStopId,passive:void 0===n.currentTabStopId}),m=b(!1),h=b(!1),y=b(0),{getItems:g,CollectionSlot:w}=Ve({isProvider:!0});function x(e){const t=!h.value;if(e.currentTarget&&e.target===e.currentTarget&&t&&!m.value){const t=new CustomEvent("rovingFocusGroup.onEntryFocus",ke);if(e.currentTarget.dispatchEvent(t),i("entryFocus",t),!t.defaultPrevented){const e=g().map((e=>e.ref)).filter((e=>""!==e.dataset.disabled));Ce([e.find((e=>"true"===e.getAttribute("data-active"))),e.find((e=>e.id===f.value)),...e].filter(Boolean),n.preventScrollOnEntryFocus)}}h.value=!1}function k(){setTimeout((()=>{h.value=!1}),1)}return t({getItems:g}),Ae({loop:r,dir:p,orientation:o,currentTabStopId:f,onItemFocus:e=>{f.value=e},onItemShiftTab:()=>{m.value=!0},onFocusableItemAdd:()=>{y.value++},onFocusableItemRemove:()=>{y.value--}}),(e,t)=>(l(),d(c(w),null,{default:s((()=>[S(c(G),{tabindex:m.value||0===y.value?-1:0,"data-orientation":c(o),as:e.as,"as-child":e.asChild,dir:c(p),style:{outline:"none"},onMousedown:t[0]||(t[0]=e=>h.value=!0),onMouseup:k,onFocus:x,onBlur:t[1]||(t[1]=e=>m.value=!1)},{default:s((()=>[u(e.$slots,"default")])),_:3},8,["tabindex","data-orientation","as","as-child","dir"])])),_:3}))}});function Be(e){return g((()=>!ee(e)||Boolean(ae(e)?.closest("form"))))}const Ee=a({inheritAttrs:!1,__name:"VisuallyHiddenInputBubble",props:{name:{},value:{},checked:{type:Boolean,default:void 0},required:{type:Boolean},disabled:{type:Boolean},feature:{default:"fully-hidden"}},setup(e){const t=e,{primitiveElement:a,currentElement:n}=xe(),r=g((()=>t.checked??t.value));return m(r,((e,t)=>{if(!n.value)return;const a=n.value,i=window.HTMLInputElement.prototype,r=Object.getOwnPropertyDescriptor(i,"value").set;if(r&&e!==t){const t=new Event("input",{bubbles:!0}),n=new Event("change",{bubbles:!0});r.call(a,e),a.dispatchEvent(t),a.dispatchEvent(n)}})),(e,n)=>(l(),d(W,i({ref_key:"primitiveElement",ref:a},{...t,...e.$attrs},{as:"input"}),null,16))}}),je=a({inheritAttrs:!1,__name:"VisuallyHiddenInput",props:{name:{},value:{},checked:{type:Boolean,default:void 0},required:{type:Boolean},disabled:{type:Boolean},feature:{default:"fully-hidden"}},setup(e){const a=e,n=g((()=>"string"==typeof a.value||"number"==typeof a.value||"boolean"==typeof a.value?[{name:a.name,value:a.value}]:"object"==typeof a.value&&Array.isArray(a.value)?a.value.flatMap(((e,t)=>"object"==typeof e?Object.entries(e).map((([e,n])=>({name:`[${a.name}][${t}][${e}]`,value:n}))):{name:`[${a.name}][${t}]`,value:e})):null===a.value||"object"!=typeof a.value||Array.isArray(a.value)?[]:Object.entries(a.value).map((([e,t])=>({name:`[${a.name}][${e}]`,value:t})))));return(e,r)=>(l(!0),V(t,null,$(n.value,(t=>(l(),d(Ee,i({key:t.name,ref_for:!0},{...a,...e.$attrs},{name:t.name,value:t.value}),null,16,["name","value"])))),128))}}),[Me,Le]=me("CheckboxGroupRoot"),Te=a({__name:"CheckboxGroupRoot",props:{defaultValue:{},modelValue:{},rovingFocus:{type:Boolean,default:!0},disabled:{type:Boolean},as:{},asChild:{type:Boolean},dir:{},orientation:{},loop:{type:Boolean},name:{},required:{type:Boolean}},emits:["update:modelValue"],setup(e,{emit:t}){const a=e,n=t,{disabled:r,rovingFocus:o,dir:v}=C(a),p=ye(v),{primitiveElement:f,currentElement:m}=xe(),h=Be(m),b=ie(a,"modelValue",n,{defaultValue:a.defaultValue??[],passive:void 0===a.modelValue}),y=g((()=>o.value?{loop:a.loop,dir:p.value,orientation:a.orientation}:{}));return Le({modelValue:b,rovingFocus:o,disabled:r}),(e,t)=>(l(),d(A(c(o)?c(Ie):c(G)),i({ref_key:"primitiveElement",ref:f,as:e.as,"as-child":e.asChild},y.value),{default:s((()=>[u(e.$slots,"default"),c(h)&&e.name?(l(),d(c(je),{key:0,name:e.name,value:c(b),required:e.required},null,8,["name","value","required"])):I("",!0)])),_:3},16,["as","as-child"]))}}),qe=a({__name:"RovingFocusItem",props:{tabStopId:{},focusable:{type:Boolean,default:!0},active:{type:Boolean,default:!0},allowShiftKey:{type:Boolean},asChild:{type:Boolean},as:{default:"span"}},setup(t){const a=t,n=$e(),i=g((()=>a.tabStopId||function(t,a="reka"){if(t)return t;const n=he({useId:void 0});return e.useId?`${a}-${e.useId()}`:n.useId?`${a}-${n.useId()}`:`${a}-${++we}`}())),r=g((()=>n.currentTabStopId.value===i.value)),{getItems:o,CollectionItem:v}=Ve(),{primitiveElement:p,currentElement:f}=xe(),m=g((()=>f.value?.getRootNode()));function h(e){if("Tab"===e.key&&e.shiftKey)return void n.onItemShiftTab();if(e.target!==e.currentTarget)return;const t=function(e,t,a){const n=function(e,t){return"rtl"!==t?e:"ArrowLeft"===e?"ArrowRight":"ArrowRight"===e?"ArrowLeft":e}(e.key,a);if(!("vertical"===t&&["ArrowLeft","ArrowRight"].includes(n)||"horizontal"===t&&["ArrowUp","ArrowDown"].includes(n)))return _e[n]}(e,n.orientation.value,n.dir.value);if(void 0!==t){if(e.metaKey||e.ctrlKey||e.altKey||!a.allowShiftKey&&e.shiftKey)return;e.preventDefault();let l=[...o().map((e=>e.ref)).filter((e=>""!==e.dataset.disabled))];if("last"===t)l.reverse();else if("prev"===t||"next"===t){"prev"===t&&l.reverse();const a=l.indexOf(e.currentTarget);l=n.loop.value?(r=a+1,(i=l).map(((e,t)=>i[(r+t)%i.length]))):l.slice(a+1)}y((()=>Ce(l,!1,m.value)))}var i,r}return B((()=>{a.focusable&&n.onFocusableItemAdd()})),E((()=>{a.focusable&&n.onFocusableItemRemove()})),(e,t)=>(l(),d(c(v),null,{default:s((()=>[S(c(G),{ref_key:"primitiveElement",ref:p,tabindex:r.value?0:-1,"data-orientation":c(n).orientation.value,"data-active":e.active,"data-disabled":e.focusable?void 0:"",as:e.as,"as-child":e.asChild,onMousedown:t[0]||(t[0]=t=>{e.focusable?c(n).onItemFocus(i.value):t.preventDefault()}),onFocus:t[1]||(t[1]=e=>c(n).onItemFocus(i.value)),onKeydown:h},{default:s((()=>[u(e.$slots,"default")])),_:3},8,["tabindex","data-orientation","data-active","data-disabled","as","as-child"])])),_:3}))}});function Oe(e){return"indeterminate"===e}function Re(e){return Oe(e)?"indeterminate":e?"checked":"unchecked"}const[He,ze]=me("CheckboxRoot"),Fe=a({inheritAttrs:!1,__name:"CheckboxRoot",props:{defaultValue:{type:[Boolean,String]},modelValue:{type:[Boolean,String,null],default:void 0},disabled:{type:Boolean},value:{default:"on"},id:{},asChild:{type:Boolean},as:{default:"button"},name:{},required:{type:Boolean}},emits:["update:modelValue"],setup(e,{emit:t}){const a=e,n=t,{forwardRef:r,currentElement:o}=ge(),v=Me(null),p=ie(a,"modelValue",n,{defaultValue:a.defaultValue,passive:void 0===a.modelValue}),f=g((()=>v?.disabled.value||a.disabled)),m=g((()=>pe(v?.modelValue.value)?"indeterminate"===p.value?"indeterminate":p.value:fe(v.modelValue.value,a.value)));function h(){if(pe(v?.modelValue.value))p.value=!!Oe(p.value)||!p.value;else{const e=[...v.modelValue.value||[]];if(fe(e,a.value)){const t=e.findIndex((e=>ve(e,a.value)));e.splice(t,1)}else e.push(a.value);v.modelValue.value=e}}const b=Be(o),y=g((()=>a.id&&o.value?document.querySelector(`[for="${a.id}"]`)?.innerText:void 0));return ze({disabled:f,state:m}),(e,t)=>(l(),d(A(c(v)?.rovingFocus.value?c(qe):c(G)),i(e.$attrs,{id:e.id,ref:c(r),role:"checkbox","as-child":e.asChild,as:e.as,type:"button"===e.as?"button":void 0,"aria-checked":c(Oe)(m.value)?"mixed":m.value,"aria-required":e.required,"aria-label":e.$attrs["aria-label"]||y.value,"data-state":c(Re)(m.value),"data-disabled":f.value?"":void 0,disabled:f.value,focusable:c(v)?.rovingFocus.value?!f.value:void 0,onKeydown:j(M((()=>{}),["prevent"]),["enter"]),onClick:h}),{default:s((()=>[u(e.$slots,"default",{modelValue:c(p),state:m.value}),c(b)&&e.name&&!c(v)?(l(),d(c(je),{key:0,type:"checkbox",checked:!!m.value,name:e.name,value:e.value,disabled:f.value,required:e.required},null,8,["checked","name","value","disabled","required"])):I("",!0)])),_:3},16,["id","as-child","as","type","aria-checked","aria-required","aria-label","data-state","data-disabled","disabled","focusable","onKeydown"]))}}),[Ue,Pe]=me("RadioGroupRoot"),Ze=a({__name:"RadioGroupRoot",props:{modelValue:{},defaultValue:{},disabled:{type:Boolean,default:!1},orientation:{default:void 0},dir:{},loop:{type:Boolean,default:!0},asChild:{type:Boolean},as:{},name:{},required:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(e,{emit:t}){const a=e,n=t,{forwardRef:i,currentElement:r}=ge(),o=ie(a,"modelValue",n,{defaultValue:a.defaultValue,passive:void 0===a.modelValue}),{disabled:v,loop:p,orientation:f,name:m,required:h,dir:b}=C(a),y=ye(b),g=Be(r);return Pe({modelValue:o,changeModelValue:e=>{o.value=e},disabled:v,loop:p,orientation:f,name:m?.value,required:h}),(e,t)=>(l(),d(c(Ie),{"as-child":"",orientation:c(f),dir:c(y),loop:c(p)},{default:s((()=>[S(c(G),{ref:c(i),role:"radiogroup","data-disabled":c(v)?"":void 0,"as-child":e.asChild,as:e.as,"aria-orientation":c(f),"aria-required":c(h),dir:c(y)},{default:s((()=>[u(e.$slots,"default",{modelValue:c(o)}),c(g)&&c(m)?(l(),d(c(je),{key:0,required:c(h),disabled:c(v),value:c(o),name:c(m)},null,8,["required","disabled","value","name"])):I("",!0)])),_:3},8,["data-disabled","as-child","as","aria-orientation","aria-required","dir"])])),_:3},8,["orientation","dir","loop"]))}});function Ne(e,t,a){!function(e,t,a){const n=a.originalEvent.target,i=new CustomEvent(e,{bubbles:!1,cancelable:!0,detail:a});t&&n.addEventListener(e,t,{once:!0}),n.dispatchEvent(i)}("radio.select",a,{originalEvent:e,value:t})}const Ke=a({__name:"Radio",props:{id:{},value:{},disabled:{type:Boolean,default:!1},checked:{type:Boolean,default:void 0},asChild:{type:Boolean},as:{default:"button"},name:{},required:{type:Boolean}},emits:["update:checked","select"],setup(e,{emit:t}){const a=e,n=t,r=ie(a,"checked",n,{passive:void 0===a.checked}),{value:o}=C(a),{forwardRef:v,currentElement:p}=ge(),f=Be(p),m=g((()=>a.id&&p.value?document.querySelector(`[for="${a.id}"]`)?.innerText??a.value:void 0));function h(e){Ne(e,a.value,(e=>{n("select",e),e?.defaultPrevented||(r.value=!0,f.value&&e.stopPropagation())}))}return(e,t)=>(l(),d(c(G),i(e.$attrs,{id:e.id,ref:c(v),role:"radio",type:"button"===e.as?"button":void 0,as:e.as,"aria-checked":c(r),"aria-label":m.value,"as-child":e.asChild,disabled:e.disabled?"":void 0,"data-state":c(r)?"checked":"unchecked","data-disabled":e.disabled?"":void 0,value:c(o),required:e.required,name:e.name,onClick:M(h,["stop"])}),{default:s((()=>[u(e.$slots,"default",{checked:c(r)}),c(f)&&e.name?(l(),d(c(je),{key:0,type:"radio",tabindex:"-1",value:c(o),checked:!!c(r),name:e.name,disabled:e.disabled,required:e.required},null,8,["value","checked","name","disabled","required"])):I("",!0)])),_:3},16,["id","type","as","aria-checked","aria-label","as-child","disabled","data-state","data-disabled","value","required","name"]))}}),[De,Ge]=me("RadioGroupItem"),We=a({inheritAttrs:!1,__name:"RadioGroupItem",props:{id:{},value:{},disabled:{type:Boolean,default:!1},asChild:{type:Boolean},as:{default:"button"},name:{},required:{type:Boolean}},emits:["select"],setup(e,{emit:t}){const a=e,n=t,{forwardRef:r,currentElement:o}=ge(),v=Ue(),p=g((()=>v.disabled.value||a.disabled)),f=g((()=>v.required.value||a.required)),m=g((()=>ve(v.modelValue?.value,a.value)));Ge({disabled:p,checked:m});const h=b(!1),y=["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"];function w(){setTimeout((()=>{h.value&&o.value?.click()}),0)}return ne("keydown",(e=>{y.includes(e.key)&&(h.value=!0)})),ne("keyup",(()=>{h.value=!1})),(e,t)=>(l(),d(c(qe),{checked:m.value,disabled:p.value,"as-child":"",focusable:!p.value,active:m.value},{default:s((()=>[S(Ke,i({...e.$attrs,...a},{ref:c(r),checked:m.value,required:f.value,disabled:p.value,"onUpdate:checked":t[0]||(t[0]=t=>c(v).changeModelValue(e.value)),onSelect:t[1]||(t[1]=e=>n("select",e)),onKeydown:t[2]||(t[2]=j(M((()=>{}),["prevent"]),["enter"])),onFocus:w}),{default:s((()=>[u(e.$slots,"default")])),_:3},16,["checked","required","disabled"])])),_:3},8,["checked","disabled","focusable","active"]))}});function Je(){return Ye(window.location.pathname)}function Ye(e){const t=e.split("/"),a=t.indexOf("admin");return t.slice(0,a).join("/")+"/"}function Qe(e,t){const a=new URL(`assets/${e}`,Ye(window.location.href));return t&&a.searchParams.set("download",""),a.href}function Xe(e){return null==e?void 0:e.startsWith("<svg")}const et=["role","aria-checked","aria-disabled"],tt=["innerHTML"],at={key:1,class:"image"},nt={key:1,class:"fallback"},it={class:"check-indicator"},rt={key:0,class:"description"};var ot=a({__name:"CardPreview",props:{choice:{},isSelected:{type:Boolean},disabled:{type:Boolean,default:!1},selectionType:{},name:{}},setup(e){const a=e,n=g((()=>"checkbox"===a.selectionType?a.isSelected?"check_box":"check_box_outline_blank":a.isSelected?"radio_button_checked":"radio_button_unchecked")),i=g((()=>"radio"===a.selectionType?"radio":"checkbox"));return(e,a)=>{const r=L("v-image"),o=L("v-icon"),d=L("v-text-overflow");return l(),V(t,null,[T("div",{class:"preview",role:i.value,"aria-checked":e.isSelected,"aria-disabled":e.disabled},["image"===e.choice.icon_type||"svg"===e.choice.icon_type?(l(),V(t,{key:0},[c(Xe)(e.choice.svg_icon)?(l(),V("span",{key:0,class:"svg",innerHTML:e.choice.svg_icon},null,8,tt)):e.choice.image?(l(),V("div",at,[S(r,{src:c(Qe)(`${e.choice.image}?key=system-medium-contain`),alt:e.choice.text},null,8,["src","alt"])])):I("v-if",!0)],64)):(l(),V("span",nt,[S(o,{name:e.choice.icon||"box","x-large":""},null,8,["name"])])),T("div",it,[S(o,{name:n.value,color:e.isSelected?"var(--theme--primary)":"var(--theme--border-color)",class:q(["icon",{radio:"radio"===e.selectionType,checkbox:"checkbox"===e.selectionType}])},null,8,["name","color","class"])])],8,et),S(d,{text:e.choice.text,class:"name"},null,8,["text"]),e.choice.description?(l(),V("span",rt,O(e.choice.description),1)):I("v-if",!0)],64)}}}),lt=[],dt=[];function ct(e,t){if(e&&"undefined"!=typeof document){var a,n=!0===t.prepend?"prepend":"append",i=!0===t.singleTag,r="string"==typeof t.container?document.querySelector(t.container):document.getElementsByTagName("head")[0];if(i){var o=lt.indexOf(r);-1===o&&(o=lt.push(r)-1,dt[o]={}),a=dt[o]&&dt[o][n]?dt[o][n]:dt[o][n]=l()}else a=l();65279===e.charCodeAt(0)&&(e=e.substring(1)),a.styleSheet?a.styleSheet.cssText+=e:a.appendChild(document.createTextNode(e))}function l(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),t.attributes)for(var a=Object.keys(t.attributes),i=0;i<a.length;i++)e.setAttribute(a[i],t.attributes[a[i]]);var o="prepend"===n?"afterbegin":"beforeend";return r.insertAdjacentElement(o,e),e}}ct(".preview[data-v-4aa141ce] {\n  --preview-padding: 16px;\n  --preview-small-padding: 8px;\n  position: relative;\n  width: 100%;\n  aspect-ratio: 16/10;\n  margin-bottom: var(--preview-small-padding);\n  background: var(--theme--background--subdued);\n  border: var(--theme--border-width) solid var(--border-color);\n  border-radius: var(--theme--border-radius);\n  overflow: hidden;\n  transition: all var(--fast) var(--transition);\n}\n.preview .svg[data-v-4aa141ce],\n.preview .fallback[data-v-4aa141ce] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--preview-padding);\n  user-select: none;\n  -webkit-user-drag: none;\n}\n.preview img[data-v-4aa141ce] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  object-fit: contain;\n  padding: var(--preview-small-padding);\n  user-select: none;\n  -webkit-user-drag: none;\n}\n.preview .fallback[data-v-4aa141ce] {\n  color: var(--theme--primary);\n  font-size: 24px;\n}\n.preview .fallback .v-icon[data-v-4aa141ce] {\n  font-size: 48px;\n}\n\n.check-indicator[data-v-4aa141ce] {\n  position: absolute;\n  top: var(--preview-small-padding);\n  left: var(--preview-small-padding);\n  z-index: 1;\n  padding: 0;\n}\n.check-indicator .icon[data-v-4aa141ce] {\n  display: block;\n  background: var(--theme--background);\n}\n.check-indicator .icon.radio[data-v-4aa141ce] {\n  border-radius: 9999px;\n}\n.check-indicator .icon.checkbox[data-v-4aa141ce] {\n  border-radius: 4px;\n}\n\n.name[data-v-4aa141ce] {\n  color: var(--theme--foreground);\n  font-size: 15px;\n  text-align: left;\n  padding: 0 4px;\n}\n\n.description[data-v-4aa141ce] {\n  color: var(--theme--foreground-subdued);\n  font-size: 13px;\n  margin-block-start: 4px;\n  line-height: 1.2;\n  text-align: left;\n  padding: 0 4px;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  line-clamp: 2;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}",{});var st=(e,t)=>{const a=e.__vccOpts||e;for(const[e,n]of t)a[e]=n;return a},ut=st(ot,[["__scopeId","data-v-4aa141ce"],["__file","CardPreview.vue"]]);const vt={class:"card-select-interface content"};var pt=a({__name:"interface",props:{disabled:{type:Boolean,default:!1},choices:{default:null},gridSize:{default:4},width:{},type:{},collection:{},field:{},primaryKey:{},enableSearch:{type:Boolean,default:!1},value:{}},emits:["input"],setup(e,{emit:a}){const n=e,i=a,r=b(n.value),o=b("");function u(e){r.value=e,i("input",e)}m((()=>n.value),(e=>{r.value=e}));const v=g((()=>({"--columns-xl":n.gridSize,"--columns-lg":Math.min(n.gridSize,3),"--columns-md":Math.min(n.gridSize,2),"--columns-sm":1}))),p=g((()=>{var e;return o.value?null==(e=n.choices)?void 0:e.filter((e=>e.text.toLowerCase().includes(o.value.toLowerCase()))):n.choices}));function f(){o.value=""}return(e,a)=>{const n=L("v-icon"),i=L("v-input");return l(),V("div",vt,[e.enableSearch?(l(),d(i,{key:0,modelValue:o.value,"onUpdate:modelValue":a[0]||(a[0]=e=>o.value=e),placeholder:"Search...",small:"",type:"search"},{prepend:s((()=>[S(n,{name:"search"})])),append:s((()=>[o.value?(l(),d(n,{key:0,name:"close",clickable:"",onClick:f})):I("v-if",!0)])),_:1},8,["modelValue"])):I("v-if",!0),S(c(Ze),{modelValue:r.value,"onUpdate:modelValue":[a[1]||(a[1]=e=>r.value=e),u],disabled:e.disabled,class:"group"},{default:s((()=>[S(R,{name:"list",tag:"div",class:"grid",style:H(v.value)},{default:s((()=>[(l(!0),V(t,null,$(p.value,(t=>(l(),d(c(We),{key:t.value,value:t.value,class:q(["interface radio-root",{active:r.value===t.value,gray:r.value&&r.value!==t.value}])},{default:s((()=>[S(ut,{choice:t,"is-selected":r.value===t.value,disabled:e.disabled,"selection-type":"radio"},null,8,["choice","is-selected","disabled"])])),_:2},1032,["value","class"])))),128))])),_:1},8,["style"])])),_:1},8,["modelValue","disabled"])])}}});ct(".card-select-interface[data-v-58640cba] .content {\n  padding: 0;\n}\n.card-select-interface[data-v-58640cba] .grid {\n  display: grid;\n  width: 100%;\n  gap: var(--theme--form--column-gap);\n  grid-template-columns: repeat(var(--columns-xl), minmax(0, 1fr));\n}\n@media (max-width: 840px) {\n  .card-select-interface[data-v-58640cba] .grid {\n    grid-template-columns: repeat(var(--columns-lg), minmax(0, 1fr));\n  }\n}\n@media (max-width: 600px) {\n  .card-select-interface[data-v-58640cba] .grid {\n    grid-template-columns: repeat(var(--columns-md), minmax(0, 1fr));\n  }\n}\n@media (max-width: 400px) {\n  .card-select-interface[data-v-58640cba] .grid {\n    grid-template-columns: repeat(var(--columns-sm), minmax(0, 1fr));\n  }\n}\n.card-select-interface[data-v-58640cba] .interface {\n  --border-color: var(--v-input-border-color, var(--theme--form--field--input--border-color));\n  display: flex;\n  flex-direction: column;\n  padding: 0;\n  background: none;\n  border: none;\n  cursor: pointer;\n  transition: all var(--fast) var(--transition);\n}\n.card-select-interface[data-v-58640cba] .interface:hover {\n  --border-color: var(--theme--form--field--input--border-color-hover);\n}\n.card-select-interface[data-v-58640cba] .interface:focus {\n  --border-color: var(--theme--primary);\n}\n.card-select-interface[data-v-58640cba] .interface.active {\n  --border-color: var(--theme--primary);\n}\n.card-select-interface[data-v-58640cba] .interface.gray {\n  opacity: 0.8;\n}\n.card-select-interface[data-v-58640cba] .interface:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n.card-select-interface[data-v-58640cba] .v-input {\n  margin-bottom: 16px;\n}\n.card-select-interface[data-v-58640cba] .list-enter-active, .card-select-interface[data-v-58640cba] .list-leave-active {\n  transition: all 0.3s ease;\n}\n.card-select-interface[data-v-58640cba] .list-enter-from, .card-select-interface[data-v-58640cba] .list-leave-to {\n  opacity: 0;\n}\n.card-select-interface[data-v-58640cba] .list-move {\n  transition: transform 0.3s ease;\n}\n\n[data-v-58640cba] .radio-root {\n  width: 100%;\n  outline: none;\n  display: block;\n  text-align: left;\n}\n[data-v-58640cba] .radio-root:focus-visible {\n  outline: none;\n}\n[data-v-58640cba] .radio-root:focus-visible .preview {\n  outline: 2px solid var(--theme--primary);\n  outline-offset: 2px;\n  border-color: var(--theme--primary);\n}",{});const ft=[{field:"choices",type:"json",name:"Choices",meta:{width:"full",interface:"list",options:{template:"{{ text }}",fields:[{field:"text",type:"string",name:"Text",meta:{width:"half",note:"Label to show in the studio interface.",interface:"input"}},{field:"value",type:"string",name:"Value",meta:{width:"half",interface:"input",note:"Value to be stored in the database.",options:{font:"monospace"}}},{field:"description",type:"string",name:"Description",meta:{width:"full",note:"Add an optional description to display below the text label for additional context.",interface:"input-multiline"}},{field:"icon_type",type:"string",name:"Icon Type",meta:{width:"full",interface:"select-radio",options:{choices:[{text:"Icon",value:"icon"},{text:"Image",value:"image"},{text:"SVG Icon",value:"svg"}]}},schema:{default_value:"svg"}},{field:"svg_icon",type:"text",name:"SVG Icon",meta:{width:"full",interface:"input-code",options:{language:"svg"},hidden:!0,conditions:[{hidden:!1,rule:{_and:[{icon_type:{_eq:"svg"}}]}}]}},{field:"image",name:"Image",type:"uuid",special:"file",meta:{width:"full",interface:"image-uuid",relational:!0,hidden:!0,conditions:[{hidden:!1,rule:{_and:[{icon_type:{_eq:"image"}}]}}]}},{field:"icon",name:"Icon",type:"string",meta:{width:"full",interface:"select-icon",hidden:!0,conditions:[{hidden:!1,rule:{_and:[{icon_type:{_eq:"icon"}}]}}]}}]}}},{field:"enableSearch",type:"boolean",name:"Enable Search",meta:{width:"half",interface:"boolean"},schema:{default_value:!1}},{field:"gridSize",type:"integer",name:"Grid Size",meta:{width:"half",interface:"select-dropdown",options:{choices:[{text:"2 Columns",value:2},{text:"3 Columns",value:3},{text:"4 Columns",value:4},{text:"5 Columns",value:5},{text:"6 Columns",value:6}]}},schema:{default_value:4}}];var mt={id:"radio-cards-interface",name:"Radio Cards",type:"interface",description:"Radio selection group with icon buttons",group:"selection",icon:"playlist_add_check_circle",component:st(pt,[["__scopeId","data-v-58640cba"],["__file","interface.vue"]]),types:["string","integer","float","decimal","big_integer"],recommendedDisplays:["badge"],options:ft,preview:'<svg width="156" height="96" viewBox="0 0 156 96" fill="none" xmlns="http://www.w3.org/2000/svg">\n\t\t<rect x="6.5" y="13.5" width="69" height="69" rx="5.5" fill="var(--theme--background)" stroke="var(--theme--primary)"/>\n\t\t<rect x="80.5" y="13.5" width="69" height="69" rx="5.5" fill="var(--theme--background)" stroke="var(--theme--primary)"/>\n\t\t<path d="M17.8242 19C14.5976 19 12 21.5976 12 24.8242C12 28.0508 14.5976 30.6484 17.8242 30.6484C21.0508 30.6484 23.6484 28.0508 23.6484 24.8242C23.6484 21.5976 21.0508 19 17.8242 19ZM17.8242 29.5C15.2539 29.5 13.1484 27.3945 13.1484 24.8242C13.1484 22.2539 15.2539 20.1484 17.8242 20.1484C20.3945 20.1484 22.5 22.2539 22.5 24.8242C22.5 27.3945 20.3945 29.5 17.8242 29.5ZM14.8984 24.8242C14.8984 23.2109 16.2109 21.8984 17.8242 21.8984C19.4375 21.8984 20.75 23.2109 20.75 24.8242C20.75 26.4375 19.4375 27.75 17.8242 27.75C16.2109 27.75 14.8984 26.4375 14.8984 24.8242Z" fill="var(--theme--primary)"/>\n\t\t<path d="M91 19C87.676 19 85 21.676 85 25C85 28.324 87.676 31 91 31C94.324 31 97 28.324 97 25C97 21.676 94.324 19 91 19ZM91 29.8169C88.3521 29.8169 86.1831 27.6479 86.1831 25C86.1831 22.3521 88.3521 20.1831 91 20.1831C93.6479 20.1831 95.8169 22.3521 95.8169 25C95.8169 27.6479 93.6479 29.8169 91 29.8169Z" fill="var(--theme--primary)" fill-opacity="0.25"/>\n\t\t<path d="M52.6667 36.3333V59.6667H29.3333V36.3333H52.6667ZM52.6667 33H29.3333C27.5 33 26 34.5 26 36.3333V59.6667C26 61.5 27.5 63 29.3333 63H52.6667C54.5 63 56 61.5 56 59.6667V36.3333C56 34.5 54.5 33 52.6667 33ZM44.5667 47.7667L39.5667 54.2167L36 49.9L31 56.3333H51L44.5667 47.7667Z" fill="var(--theme--primary)" fill-opacity="0.5"/>\n\t\t<path d="M126.667 36.3333V59.6667H103.333V36.3333H126.667ZM126.667 33H103.333C101.5 33 100 34.5 100 36.3333V59.6667C100 61.5 101.5 63 103.333 63H126.667C128.5 63 130 61.5 130 59.6667V36.3333C130 34.5 128.5 33 126.667 33ZM118.567 47.7667L113.567 54.2167L110 49.9L105 56.3333H125L118.567 47.7667Z" fill="var(--theme--primary)" fill-opacity="0.5"/>\n\t\t</svg>'};const ht={class:"card-select-interface content"};var bt=a({__name:"interface",props:{disabled:{type:Boolean,default:!1},choices:{default:null},gridSize:{default:4},width:{},type:{},collection:{},field:{},primaryKey:{},enableSearch:{type:Boolean,default:!1},value:{}},emits:["input"],setup(e,{emit:a}){const n=e,i=a,r=b(n.value||[]),o=b("");function u(e){r.value=e,i("input",e)}m((()=>n.value),(e=>{r.value=e||[]}));const v=g((()=>({"--columns-xl":n.gridSize,"--columns-lg":Math.min(n.gridSize,3),"--columns-md":Math.min(n.gridSize,2),"--columns-sm":1}))),p=g((()=>{var e;return o.value?null==(e=n.choices)?void 0:e.filter((e=>e.text.toLowerCase().includes(o.value.toLowerCase()))):n.choices}));function f(){o.value=""}return(e,a)=>{const n=L("v-icon"),i=L("v-input");return l(),V("div",ht,[e.enableSearch?(l(),d(i,{key:0,modelValue:o.value,"onUpdate:modelValue":a[0]||(a[0]=e=>o.value=e),placeholder:"Search...",small:"",type:"search"},{prepend:s((()=>[S(n,{name:"search"})])),append:s((()=>[o.value?(l(),d(n,{key:0,name:"close",clickable:"",onClick:f})):I("v-if",!0)])),_:1},8,["modelValue"])):I("v-if",!0),S(c(Te),{modelValue:r.value,"onUpdate:modelValue":[a[1]||(a[1]=e=>r.value=e),u],disabled:e.disabled,class:"group",loop:!0,role:"group"},{default:s((()=>[S(R,{name:"list",tag:"div",class:"grid",style:H(v.value)},{default:s((()=>[(l(!0),V(t,null,$(p.value,(t=>(l(),V("div",{key:t.value,class:q(["interface",{active:r.value.includes(t.value),gray:r.value.length>0&&!r.value.includes(t.value)}])},[S(c(Fe),{value:t.value,disabled:e.disabled,class:"checkbox-root","aria-label":t.text,tabindex:"0"},{default:s((()=>[S(ut,{choice:t,"is-selected":r.value.includes(t.value),disabled:e.disabled,"selection-type":"checkbox"},null,8,["choice","is-selected","disabled"])])),_:2},1032,["value","disabled","aria-label"])],2)))),128))])),_:1},8,["style"])])),_:1},8,["modelValue","disabled"])])}}});ct(".card-select-interface[data-v-d40b8e71] .content {\n  padding: 0;\n}\n.card-select-interface[data-v-d40b8e71] .grid {\n  display: grid;\n  width: 100%;\n  gap: var(--theme--form--column-gap);\n  grid-template-columns: repeat(var(--columns-xl), minmax(0, 1fr));\n}\n@media (max-width: 840px) {\n  .card-select-interface[data-v-d40b8e71] .grid {\n    grid-template-columns: repeat(var(--columns-lg), minmax(0, 1fr));\n  }\n}\n@media (max-width: 600px) {\n  .card-select-interface[data-v-d40b8e71] .grid {\n    grid-template-columns: repeat(var(--columns-md), minmax(0, 1fr));\n  }\n}\n@media (max-width: 400px) {\n  .card-select-interface[data-v-d40b8e71] .grid {\n    grid-template-columns: repeat(var(--columns-sm), minmax(0, 1fr));\n  }\n}\n.card-select-interface[data-v-d40b8e71] .interface {\n  --border-color: var(--v-input-border-color, var(--theme--form--field--input--border-color));\n  display: flex;\n  flex-direction: column;\n  padding: 0;\n  background: none;\n  border: none;\n  cursor: pointer;\n  transition: all var(--fast) var(--transition);\n}\n.card-select-interface[data-v-d40b8e71] .interface:hover {\n  --border-color: var(--theme--form--field--input--border-color-hover);\n}\n.card-select-interface[data-v-d40b8e71] .interface:focus {\n  --border-color: var(--theme--primary);\n}\n.card-select-interface[data-v-d40b8e71] .interface.active {\n  --border-color: var(--theme--primary);\n}\n.card-select-interface[data-v-d40b8e71] .interface.gray {\n  opacity: 0.8;\n}\n.card-select-interface[data-v-d40b8e71] .interface:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n.card-select-interface[data-v-d40b8e71] .v-input {\n  margin-bottom: 16px;\n}\n.card-select-interface[data-v-d40b8e71] .list-enter-active, .card-select-interface[data-v-d40b8e71] .list-leave-active {\n  transition: all 0.3s ease;\n}\n.card-select-interface[data-v-d40b8e71] .list-enter-from, .card-select-interface[data-v-d40b8e71] .list-leave-to {\n  opacity: 0;\n}\n.card-select-interface[data-v-d40b8e71] .list-move {\n  transition: transform 0.3s ease;\n}\n\n[data-v-d40b8e71] .checkbox-root {\n  width: 100%;\n  outline: none;\n  display: block;\n  text-align: left;\n}\n[data-v-d40b8e71] .checkbox-root:focus-visible {\n  outline: none;\n}\n[data-v-d40b8e71] .checkbox-root:focus-visible .preview {\n  outline: 2px solid var(--theme--primary);\n  outline-offset: 2px;\n  border-color: var(--theme--primary);\n}",{});var yt={id:"checkbox-cards-interface",name:"Checkbox Cards",type:"interface",group:"selection",description:"Checkbox selection group with icon buttons",icon:"fact_check",component:st(bt,[["__scopeId","data-v-d40b8e71"],["__file","interface.vue"]]),types:["json","csv"],recommendedDisplays:["labels"],options:ft,preview:'<svg width="156" height="96" viewBox="0 0 156 96" fill="none" xmlns="http://www.w3.org/2000/svg">\n\t\t<rect x="6.5" y="13.5" width="69" height="69" rx="5.5" fill="var(--theme--background)" stroke="var(--theme--primary)"/>\n\t\t<rect x="80.5" y="13.5" width="69" height="69" rx="5.5" fill="var(--theme--background)" stroke="var(--theme--primary)"/>\n\t\t<path d="M52.6667 36.3333V59.6667H29.3333V36.3333H52.6667ZM52.6667 33H29.3333C27.5 33 26 34.5 26 36.3333V59.6667C26 61.5 27.5 63 29.3333 63H52.6667C54.5 63 56 61.5 56 59.6667V36.3333C56 34.5 54.5 33 52.6667 33ZM44.5667 47.7667L39.5667 54.2167L36 49.9L31 56.3333H51L44.5667 47.7667Z" fill="var(--theme--primary)" fill-opacity="0.5"/>\n\t\t<path d="M126.667 36.3333V59.6667H103.333V36.3333H126.667ZM126.667 33H103.333C101.5 33 100 34.5 100 36.3333V59.6667C100 61.5 101.5 63 103.333 63H126.667C128.5 63 130 61.5 130 59.6667V36.3333C130 34.5 128.5 33 126.667 33ZM118.567 47.7667L113.567 54.2167L110 49.9L105 56.3333H125L118.567 47.7667Z" fill="var(--theme--primary)" fill-opacity="0.5"/>\n\t\t<path d="M21.324 19H13.176C12.52 19 12 19.52 12 20.176V28.324C12 28.98 12.52 29.5 13.176 29.5H21.324C21.981 29.5 22.5 28.98 22.5 28.324V20.176C22.5 19.52 21.98 19 21.324 19ZM21.324 28.324H13.176V20.176H21.324V28.324ZM20.75 22.5L19.93 21.68L16.074 25.508L14.57 24.004L13.75 24.852L16.074 27.176L20.75 22.5Z" fill="var(--theme--primary)"/>\n\t\t<path d="M95.324 20.176V28.324H87.176V20.176H95.324ZM95.324 19H87.176C86.52 19 86 19.52 86 20.176V28.324C86 28.981 86.52 29.5 87.176 29.5H95.324C95.981 29.5 96.5 28.98 96.5 28.324V20.176C96.5 19.519 95.98 19 95.324 19Z" fill="var(--theme--primary)" fill-opacity="0.25"/>\n\t\t</svg>\n\t\t'};const gt={key:2,class:"image-preview"},wt={key:0,class:"image-error"},xt={class:"message"},kt=["src","alt"],_t={key:2,class:"fallback"},Ct={key:3,class:"actions"},St={class:"info"},Vt={class:"title"},$t={class:"meta"};var At=a({__name:"interface",props:{value:{default:null},disabled:{type:Boolean,default:!1},folder:{default:void 0},file_key_to_get:{default:"filename_disk"},crop:{type:Boolean,default:!1},letterbox:{type:Boolean,default:!1},width:{default:"auto"}},emits:["input"],setup(e,{emit:t}){const a=e,n=t,i=b(!1),r=b(null),o=b(!1),u=b(null),v=b(!0),p=P(),{t:f,te:h}=N();function y(e,t,a){const n=a||function(e){var t;return(null==(t=e.defaults.headers.common.Authorization)?void 0:t.split(" ")[1])||null}(e);return n?function(e,t){const a=[];for(const[e,n]of Object.entries(t))a.push(`${e}=${n}`);return e.includes("?")?`${e}&${a.join("&")}`:`${e}?${a.join("&")}`}(t,{access_token:n}):t}const w=g((()=>{var e;if(!(null==(e=r.value)?void 0:e.type))return null;if(r.value.type.includes("svg"))return y(p,Je()+`assets/${r.value.id}`);if(r.value.type.includes("image")){const e=a.crop?"cover":"contain",t=Je()+`assets/${r.value.id}?key=system-large-${e}&cache-buster=${r.value.modified_on}`;return y(p,t)}return null})),x=g((()=>{if(!r.value)return null;const{filesize:e,width:t,height:a,type:n}=r.value;return t&&a?`${t}x${a} • ${e} • ${n}`:`${e} • ${n}`})),k=g((()=>a.value&&"object"==typeof a.value?a.value:{}));async function _(){var e,t,a,n;if(v.value=!1,w.value)try{await p.get(w.value)}catch(i){u.value=null==(n=null==(a=null==(t=null==(e=i.response)?void 0:e.data)?void 0:t.errors[0])?void 0:a.extensions)?void 0:n.code,u.value&&h("errors."+u.value)||(u.value="UNKNOWN")}}function C(e){r.value=e,n("input",e[a.file_key_to_get])}function $(){n("input",null),i.value=!1,r.value=null,o.value=!1}function A(e){r.value&&n("input",r.value[a.file_key_to_get])}return m((()=>a.value),((e,t)=>{e!==t&&(e&&async function(){var e;i.value=!0;try{let t="string"==typeof a.value?a.value:null==(e=a.value)?void 0:e.id;t=t.split(".").slice(0,-1).join(".");const n=await p.get(`/files/${t}`,{params:{fields:["id","title","width","height","filesize","type","filename_download"]}});null!==a.value&&"object"==typeof a.value?r.value={...n.data.data,...a.value}:r.value=n.data.data}catch(e){console.log(e)}finally{i.value=!1}}(),t&&null===e&&$())}),{immediate:!0}),(e,t)=>{const a=L("v-skeleton-loader"),n=L("v-notice"),p=L("v-icon"),m=L("v-button"),h=L("drawer-item"),b=L("v-upload"),y=z("tooltip");return l(),V("div",{class:q(["image",[e.width,{crop:e.crop}]])},[i.value?(l(),d(a,{key:0,type:"input-tall"})):e.disabled&&!r.value?(l(),d(n,{key:1,class:"disabled-placeholder",center:"",icon:"hide_image"},{default:s((()=>[F(O(c(f)("no_image_selected")),1)])),_:1})):r.value?(l(),V("div",gt,[u.value||!w.value?(l(),V("div",wt,[S(p,{large:"",name:"UNKNOWN"===u.value?"error":"info"},null,8,["name"]),T("span",xt,O(w.value?c(f)(`errors.${u.value}`):c(f)("errors.UNSUPPORTED_MEDIA_TYPE")),1)])):v.value?(l(),V("img",{key:1,src:w.value,class:q({"is-letterbox":e.letterbox}),alt:r.value.title||"",role:"presentation",onError:_},null,42,kt)):(l(),V("div",_t,[S(p,{name:"description"})])),t[2]||(t[2]=T("div",{class:"shadow"},null,-1)),e.disabled?I("v-if",!0):(l(),V("div",Ct,[I(' <v-button v-tooltip="t(\'zoom\')" icon rounded @click="lightboxActive = true">\n\t\t\t\t\t<v-icon name="zoom_in" />\n\t\t\t\t</v-button> '),U((l(),d(m,{icon:"",rounded:"",href:w.value,download:r.value.filename_download},{default:s((()=>[S(p,{name:"download"})])),_:1},8,["href","download"])),[[y,c(f)("download")]]),U((l(),d(m,{icon:"",rounded:"",onClick:t[0]||(t[0]=e=>o.value=!0)},{default:s((()=>[S(p,{name:"open_in_new"})])),_:1})),[[y,c(f)("edit_item")]]),U((l(),d(m,{icon:"",rounded:"",onClick:$},{default:s((()=>[S(p,{name:"close"})])),_:1})),[[y,c(f)("deselect")]])])),T("div",St,[T("div",Vt,O(r.value.title),1),T("div",$t,O(x.value),1)]),!e.disabled&&r.value?(l(),d(h,{key:4,active:o.value,"onUpdate:active":t[1]||(t[1]=e=>o.value=e),collection:"directus_files","primary-key":r.value.id,edits:k.value,onInput:A},null,8,["active","primary-key","edits"])):I("v-if",!0),I(" TODO: Add lightbox functionality "),I(' <file-lightbox\n\t\t\t\tv-if="image"\n\t\t\t\tv-model="lightboxActive"\n\t\t\t\t:id="image.id"\n\t\t\t\t:title="image.title"\n\t\t\t/> ')])):(l(),d(b,{key:3,"from-library":"","from-url":"",folder:e.folder,onInput:C},null,8,["folder"]))],2)}}});ct(".image-preview[data-v-c649248e] {\n  position: relative;\n  width: 100%;\n  height: var(--input-height-tall);\n  overflow: hidden;\n  background-color: var(--theme--background-normal);\n  border-radius: var(--theme--border-radius);\n}\n.image-preview img[data-v-c649248e] {\n  z-index: 1;\n  width: 100%;\n  height: 100%;\n  max-height: inherit;\n  object-fit: contain;\n}\n.image-preview img.is-letterbox[data-v-c649248e] {\n  padding: 32px;\n}\n\n.image.full .image-preview[data-v-c649248e], .image.fill .image-preview[data-v-c649248e] {\n  height: auto;\n  max-height: 400px;\n}\n.image.crop .image-preview img[data-v-c649248e] {\n  object-fit: cover;\n}\n\n.fallback[data-v-c649248e] {\n  background-color: var(--theme--background-normal);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: var(--input-height-tall);\n  border-radius: var(--theme--border-radius);\n}\n\n.image-error[data-v-c649248e] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  color: var(--theme--foreground-subdued);\n  background-color: var(--theme--background-normal);\n}\n.image-error .v-icon[data-v-c649248e] {\n  margin-bottom: 6px;\n}\n.image-error .message[data-v-c649248e] {\n  max-width: 300px;\n  padding: 0 16px;\n  text-align: center;\n}\n\n.shadow[data-v-c649248e] {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  z-index: 2;\n  width: 100%;\n  height: 40px;\n  overflow: hidden;\n  line-height: 1;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  background: linear-gradient(180deg, rgba(38, 50, 56, 0) 0%, rgba(38, 50, 56, 0.25) 100%);\n  transition: height var(--fast) var(--transition);\n}\n\n.actions[data-v-c649248e] {\n  --v-button-color: var(--theme--form--field--input--foreground-subdued);\n  --v-button-background-color: var(--white);\n  --v-button-color-hover: var(--theme--form--field--input--foreground);\n  --v-button-background-color-hover: var(--white);\n  position: absolute;\n  top: 30%;\n  left: 0;\n  z-index: 3;\n  display: flex;\n  justify-content: center;\n  width: 100%;\n}\n.actions .v-button[data-v-c649248e] {\n  margin-right: 12px;\n  transform: translateY(10px);\n  opacity: 0;\n  transition: var(--medium) var(--transition);\n  transition-property: opacity transform;\n}\n.actions .v-button[data-v-c649248e][data-v-c649248e]:nth-of-type(1) {\n  transition-delay: 0ms;\n}\n.actions .v-button[data-v-c649248e][data-v-c649248e]:nth-of-type(2) {\n  transition-delay: 25ms;\n}\n.actions .v-button[data-v-c649248e][data-v-c649248e]:nth-of-type(3) {\n  transition-delay: 50ms;\n}\n.actions .v-button[data-v-c649248e][data-v-c649248e]:nth-of-type(4) {\n  transition-delay: 75ms;\n}\n.actions .v-button[data-v-c649248e][data-v-c649248e]:nth-of-type(5) {\n  transition-delay: 100ms;\n}\n.actions .v-button[data-v-c649248e]:last-child {\n  margin-right: 0px;\n}\n\n.info[data-v-c649248e] {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  z-index: 3;\n  width: 100%;\n  padding