bb_component_superfieldtags 1.0.1

package/README.md

@@ -0,0 +1,21 @@
+# Super Field - Tags
+
+A custom Budibase form field component for array inputs (switch or checkbox).
+
+## Install in Budibase
+
+1. Build the plugin (see below) or download the release `.tar.gz` from `dist/`.
+2. In Budibase, open **Settings → Plugins → Add plugin**.
+3. Upload `bb_component_superfieldtags-1.0.0.tar.gz`.
+4. In the builder, find **Super Field - Boolean** in the components panel and drag it onto your screen.
+
+## Development
+
+```bash
+bun install
+bun link @poirazis/superlib   # local superlib (run after every bun install)
+bun run build                 # outputs dist/bb_component_superfieldtags-1.0.0.tar.gz
+bun run watch                 # rebuild on change
+```
+
+Built with Svelte 5. Requires a Budibase instance that supports Svelte 5 custom components.

package/dist/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "bb_component_superfieldtags",
+  "version": "1.0.1",
+  "description": "Super Field - Tags",
+  "license": "MIT",
+  "author": "Michael Poirazi - https://github.com/poirazis"
+}

package/dist/plugin.min.js

@@ -0,0 +1,2 @@
+!function(){try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode(".simple-button.svelte-1mahf4q{border:1px solid var(--spectrum-global-color-gray-400);background-color:var(--spectrum-global-color-gray-100);color:var(--spectrum-global-color-gray-600);cursor:pointer;user-select:none;white-space:nowrap;text-overflow:ellipsis;border-radius:.5rem;flex:none;justify-content:center;align-items:center;gap:.35rem;min-width:0;max-width:100%;max-height:1.75rem;padding:.25rem .75rem;font-size:12px;font-weight:400;transition:all .15s ease-in-out;display:flex;overflow:hidden}.simple-button.field-button.svelte-1mahf4q{border:1px solid var(--spectrum-global-color-gray-200);border-radius:.25rem;padding:.25rem .5rem}.simple-button.view-mode.svelte-1mahf4q,.simple-button.disabled.svelte-1mahf4q{cursor:default}.simple-button.disabled.svelte-1mahf4q{opacity:.6}.simple-button.svelte-1mahf4q:hover:not(.disabled):not(.view-mode){background-color:var(--spectrum-global-color-gray-300);border-color:var(--spectrum-global-color-gray-300);color:var(--spectrum-global-color-gray-800)}.simple-button.svelte-1mahf4q:active:not(.disabled):not(.view-mode){border-color:var(--spectrum-global-color-gray-500);color:var(--spectrum-global-color-gray-800)}.simple-button.selected.svelte-1mahf4q{background-color:var(--option-color,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-global-color-gray-400);color:var(--spectrum-global-color-gray-800);font-weight:600}.simple-button.warning.svelte-1mahf4q{background-color:var(--spectrum-global-color-red-400);color:#fff;border:1px solid #0000}.simple-button.warning.svelte-1mahf4q:hover:not(.disabled):not(.view-mode){background-color:var(--spectrum-global-color-red-700);color:#fff;border-color:#0000;font-weight:600}.simple-button.warning.svelte-1mahf4q:active:not(.disabled):not(.view-mode){border:1px dashed var(--spectrum-global-color-red-700);background-color:var(--spectrum-global-color-red-700);color:#fff;font-weight:600}.simple-button.warning.selected.svelte-1mahf4q{background-color:var(--spectrum-global-color-red-400);border-color:var(--spectrum-global-color-red-700);color:#fff;font-weight:600}.simple-button.icon-only.svelte-1mahf4q{aspect-ratio:1;border-radius:.25rem;flex:none;padding:.25rem}.label.svelte-1mahf4q{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.super-cell.svelte-5ns2ht{box-sizing:border-box;width:100%;min-width:0;height:2rem;color:var(--spectrum-global-color-gray-800);border:1px solid #0000;align-items:stretch;transition:background-color .15s,border-color .15s;display:flex;position:relative;overflow:hidden}.super-cell.svelte-5ns2ht:focus,.super-cell.svelte-5ns2ht:focus-visible,.super-cell.svelte-5ns2ht:focus-within,.super-cell.svelte-5ns2ht :is(:where(.svelte-5ns2ht):focus,:where(.svelte-5ns2ht):focus-visible),.super-cell.svelte-5ns2ht .switch-container:focus-visible{outline:none}.buttons.svelte-5ns2ht{align-items:center;gap:.25rem;padding-right:.25rem;display:flex}.super-cell.view.svelte-5ns2ht{background:var(--spectrum-global-color-gray-50)}.super-cell.view.svelte-5ns2ht:focus,.super-cell.view.svelte-5ns2ht:focus-within{border-color:var(--spectrum-global-color-static-blue-400)}.super-cell.view.svelte-5ns2ht:hover{border-color:rgb(from var(--spectrum-global-color-static-blue-400) r g b / .5);background:var(--spectrum-global-color-gray-50);cursor:text}.super-cell.view.readonly.svelte-5ns2ht:hover{cursor:default}.super-cell.view.disabled.svelte-5ns2ht:hover{cursor:not-allowed}.super-cell.view.error.svelte-5ns2ht{border-color:var(--spectrum-global-color-red-500)}.super-cell.editing.svelte-5ns2ht{border-color:var(--spectrum-global-color-static-blue-400);background:var(--spectrum-global-color-gray-50)}.super-cell.error.editing.svelte-5ns2ht,.super-cell.error.editing.svelte-5ns2ht:focus,.super-cell.error.editing.svelte-5ns2ht:focus-within{border-color:var(--spectrum-global-color-red-500)}.super-cell.disabled.svelte-5ns2ht{background:var(--spectrum-global-color-gray-200);color:var(--spectrum-global-color-gray-500);cursor:default}.super-cell.readonly.svelte-5ns2ht{cursor:default;background:rgb(from var(--spectrum-global-color-gray-50) r g b / .75);border-color:var(--spectrum-global-color-gray-100);color:var(--spectrum-global-color-gray-700)}.super-cell.copyable.svelte-5ns2ht{color:var(--spectrum-global-color-gray-700);border-color:var(--spectrum-global-color-gray-300);background:var(--spectrum-global-color-gray-50);cursor:pointer}.super-cell.copyable.svelte-5ns2ht:hover,.super-cell.copyable.svelte-5ns2ht:focus{border-color:var(--spectrum-global-color-gray-400);background:var(--spectrum-global-color-gray-100)}.super-cell.justCopied.svelte-5ns2ht{border-color:rgb(from var(--spectrum-global-color-static-green-400) r g b / .75)!important}.super-cell.justCopied.svelte-5ns2ht .copy-icon:where(.svelte-5ns2ht){color:var(--spectrum-global-color-green-700);opacity:1}.super-cell.copyable.icon-on-hover.svelte-5ns2ht .copy-icon:where(.svelte-5ns2ht){opacity:0}.super-cell.copyable.svelte-5ns2ht:hover .copy-icon:where(.svelte-5ns2ht),.super-cell.copyable.svelte-5ns2ht:focus .copy-icon:where(.svelte-5ns2ht){opacity:.85;cursor:pointer}.super-cell.copyable.svelte-5ns2ht:hover .copy-icon:where(.svelte-5ns2ht):hover,.super-cell.copyable.svelte-5ns2ht:focus .copy-icon:where(.svelte-5ns2ht):hover{opacity:1}.super-cell.form.svelte-5ns2ht{--super-cell-padding:0rem .75rem;border-color:var(--spectrum-global-color-gray-300);border-radius:.25rem;font-size:13px}.super-cell.form.view.with-popup.svelte-5ns2ht:hover{border-color:var(--spectrum-global-color-gray-300);background:var(--spectrum-global-color-gray-100);cursor:pointer}.super-cell.form.editing.with-popup.svelte-5ns2ht{border-color:var(--spectrum-global-color-gray-300);background:var(--spectrum-global-color-gray-100)}.super-cell.form.editing.svelte-5ns2ht:is(:where(.svelte-5ns2ht):focus,:where(.svelte-5ns2ht):focus-within,.with-popup:where(.svelte-5ns2ht):is(:where(.svelte-5ns2ht):focus,:where(.svelte-5ns2ht):focus-within)){border-color:var(--spectrum-global-color-blue-400)}.super-cell.cell.svelte-5ns2ht{--super-cell-padding:0 var(--super-table-cell-padding,.75rem);height:auto;color:inherit;background:0 0;border:1px solid #0000;font-size:12px;line-height:1.25}.super-cell.cell.svelte-5ns2ht .value-contents{font-size:inherit}.super-cell.cell.view.svelte-5ns2ht:hover{border-color:rgb(from var(--spectrum-global-color-static-blue-400) r g b / .5);cursor:text}.super-cell.cell.view.with-popup.svelte-5ns2ht:hover{cursor:pointer}.super-cell.cell.view.svelte-5ns2ht:is(:where(.svelte-5ns2ht):focus,:where(.svelte-5ns2ht):focus-within){border-color:var(--spectrum-global-color-static-blue-400)}.super-cell.cell.editing.svelte-5ns2ht{border-color:var(--spectrum-global-color-static-blue-400);background:var(--spectrum-global-color-gray-50)}.super-cell.cell.editing.with-popup.svelte-5ns2ht{border-color:var(--spectrum-global-color-blue-400);cursor:pointer}.super-cell.cell.editing.svelte-5ns2ht:is(:where(.svelte-5ns2ht):focus,:where(.svelte-5ns2ht):focus-within,.with-popup:where(.svelte-5ns2ht):is(:where(.svelte-5ns2ht):focus,:where(.svelte-5ns2ht):focus-within)){border-color:var(--spectrum-global-color-blue-400)}.super-cell.cell.error.editing.svelte-5ns2ht,.super-cell.cell.error.editing.svelte-5ns2ht:is(:where(.svelte-5ns2ht):focus,:where(.svelte-5ns2ht):focus-within){border-color:var(--spectrum-global-color-red-500)}.super-cell.cell.svelte-5ns2ht:not(.editing) .control-icon,.super-cell.cell.svelte-5ns2ht:not(.editing) .action-icon{display:none}.super-cell.isDirty.svelte-5ns2ht{border-left:2px solid var(--spectrum-global-color-orange-400)!important}.super-cell.form.naked-field.svelte-5ns2ht{height:auto;min-height:unset;padding:unset!important;background:0 0!important;border-color:#0000!important;max-width:fit-content!important}.super-cell.form.naked-field.svelte-5ns2ht:is(.view:where(.svelte-5ns2ht),.editing:where(.svelte-5ns2ht),.readonly:where(.svelte-5ns2ht),.disabled:where(.svelte-5ns2ht)){background:0 0;border-color:#0000}.super-cell.form.naked-field.svelte-5ns2ht:is(.view:where(.svelte-5ns2ht),.editing:where(.svelte-5ns2ht)):hover,.super-cell.form.naked-field:is(.view:where(.svelte-5ns2ht),.editing:where(.svelte-5ns2ht)).with-popup.svelte-5ns2ht:hover{cursor:pointer;background:0 0;border-color:#0000}.super-cell.form.naked-field.svelte-5ns2ht:is(:where(.svelte-5ns2ht):focus,:where(.svelte-5ns2ht):focus-within),.super-cell.form.naked-field.error.svelte-5ns2ht{border-color:#0000}.super-cell.form.multirow.svelte-5ns2ht{--super-cell-padding:.5rem .75rem;align-items:flex-start;height:auto}.super-cell.form.multirow.svelte-5ns2ht :is(.copy-icon:where(.svelte-5ns2ht),.field-icon:where(.svelte-5ns2ht),.clear-icon:where(.svelte-5ns2ht),.error-icon:where(.svelte-5ns2ht)){align-self:flex-start;margin-top:.5rem}.super-cell.form.multirow.svelte-5ns2ht :is(.field-icon:where(.svelte-5ns2ht),.clear-icon:where(.svelte-5ns2ht),.error-icon:where(.svelte-5ns2ht)){padding-left:.5rem}.super-cell.form.multirow.svelte-5ns2ht .field-icon:where(.svelte-5ns2ht){color:var(--spectrum-global-color-gray-600)}.super-cell.form.multirow.svelte-5ns2ht .buttons:where(.svelte-5ns2ht){flex-direction:column;align-items:flex-start;margin-top:.25rem;margin-bottom:.5rem}.super-cell.svelte-5ns2ht>:is(.copy-icon:where(.svelte-5ns2ht),.control-icon:where(.svelte-5ns2ht)){opacity:.5;justify-content:center;align-self:stretch;align-items:center;padding-left:.5rem;padding-right:.5rem;font-size:15px;transition:color .15s,opacity .15s;display:flex}.super-cell.svelte-5ns2ht>.copy-icon:where(.svelte-5ns2ht){color:var(--spectrum-global-color-gray-600);border-left:1px solid var(--spectrum-global-color-gray-300)}.super-cell.svelte-5ns2ht>.control-icon:where(.svelte-5ns2ht){color:var(--spectrum-global-color-gray-700)}.super-cell.svelte-5ns2ht:hover>.control-icon:where(.svelte-5ns2ht),.super-cell.copyable.svelte-5ns2ht>.copy-icon:where(.svelte-5ns2ht),.super-cell.copyable.svelte-5ns2ht:hover>.copy-icon:where(.svelte-5ns2ht){cursor:pointer}.super-cell.svelte-5ns2ht:hover>.control-icon:where(.svelte-5ns2ht){opacity:1}.super-cell.svelte-5ns2ht :is(.error-icon:where(.svelte-5ns2ht),.field-icon:where(.svelte-5ns2ht)){align-self:center;padding-left:.75rem}.error-icon.svelte-5ns2ht,.clear-icon.svelte-5ns2ht{font-size:14px}.error-icon.svelte-5ns2ht{color:var(--spectrum-global-color-red-500)}.clear-icon.svelte-5ns2ht{color:var(--spectrum-global-color-red-400);z-index:1}.field-icon.svelte-5ns2ht{color:var(--spectrum-global-color-gray-600)}.clear-icon.svelte-5ns2ht:hover{color:var(--spectrum-global-color-red-700);cursor:pointer}.super-cell :is(input,textarea).editor{box-sizing:border-box;width:0;min-width:0;max-width:100%;height:100%;color:inherit;padding:var(--super-cell-padding);font-style:inherit;font-size:inherit;cursor:inherit;background:0 0;border:none;outline:none;flex:1 1 0}.super-cell :is(input,textarea).editor:is(.svelte-5ns2ht:focus,.svelte-5ns2ht:focus-visible){background:var(--spectrum-global-color-gray-50);outline:none}.super-cell textarea.editor{font-family:inherit;font-weight:inherit;resize:vertical}.super-cell :is(input,textarea).editor.placeholder{color:var(--spectrum-global-color-gray-600)!important;font-style:italic!important}.hide-popover.svelte-1vbe9zl{display:contents}.spectrum-Popover.svelte-1vbe9zl{border-color:var(--spectrum-global-color-gray-300);background-color:var(--spectrum-global-color-gray-50);overflow:auto}.customZindex.svelte-1vbe9zl{z-index:var(--customZindex)!important}.popup.svelte-fbxj89{flex-direction:column;display:flex;overflow:hidden}.value-contents.svelte-fbxj89{width:100%;min-width:0;max-width:100%;height:100%;padding:var(--super-cell-padding);flex:auto;align-items:stretch;font-size:13px;display:flex;overflow:hidden}.value.svelte-fbxj89{flex:1;align-self:stretch;align-items:center;min-width:0;display:flex;overflow:hidden}.value-contents.placeholder.svelte-fbxj89 .placeholder-text:where(.svelte-fbxj89){color:var(--spectrum-global-color-gray-500);text-overflow:ellipsis;white-space:nowrap;font-style:italic;overflow:hidden}.tags.svelte-fbxj89{box-sizing:border-box;flex-wrap:wrap;flex:auto;align-content:flex-start;align-items:center;gap:.5rem;width:100%;min-width:0;max-height:6rem;display:flex;overflow-y:auto}.tag.svelte-fbxj89{background-color:var(--option-color,var(--spectrum-global-color-gray-300));border:1px solid var(--option-color,var(--spectrum-global-color-gray-400));box-sizing:border-box;text-transform:uppercase;border-radius:.5rem;outline:none;flex-shrink:1;align-items:center;gap:.25rem;min-width:0;max-width:7rem;padding:0 .5rem;font-size:11px;font-weight:700;transition:all .2s ease-in-out;display:inline-flex}.tag.svelte-fbxj89:hover{filter:brightness(.9)}.tag.svelte-fbxj89:hover>.remove-icon:where(.svelte-fbxj89){cursor:pointer;display:block}.tag.svelte-fbxj89>span:where(.svelte-fbxj89){text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.remove-icon.svelte-fbxj89{z-index:2;cursor:pointer;font-size:12px;transition:all .2s ease-in-out;display:none}.tag-input.svelte-fbxj89{text-transform:none;flex:1 1 0;width:0;min-width:0;height:1.5rem;font-size:12px;font-weight:400;background:0 0!important;padding:0!important}.options.svelte-fbxj89{max-height:200px;color:var(--spectrum-global-color-gray-700);flex-direction:column;align-items:stretch;display:flex;overflow-y:auto}.option.svelte-fbxj89{justify-content:space-between;align-items:center;gap:.5rem;min-height:1.75rem;padding:0 .5rem;display:flex}.option.svelte-fbxj89:hover,.option.highlighted.svelte-fbxj89{background-color:var(--spectrum-global-color-gray-75);cursor:pointer}.option.highlighted.svelte-fbxj89{color:var(--spectrum-global-color-gray-800)}.option.loading.svelte-fbxj89{color:var(--spectrum-global-color-gray-500);justify-content:center;font-style:italic}.option.svelte-fbxj89>span:where(.svelte-fbxj89){text-overflow:ellipsis;white-space:nowrap;align-items:center;gap:.5rem;display:flex;overflow:hidden}.super-field.svelte-gmb99o{width:100%;min-width:80px;min-height:var(--field-height,2rem);flex-direction:column;flex:1;align-items:stretch;display:flex;overflow:hidden}.super-field.multirow.svelte-gmb99o{max-height:var(--field-height)}.super-field.left-label.svelte-gmb99o{flex-direction:row;align-items:center;gap:.75rem}.super-field.tall.svelte-gmb99o{height:100%;max-height:unset;justify-content:stretch}.super-field.tall.left-label.svelte-gmb99o{align-items:stretch}.inline-cells.svelte-gmb99o{align-items:stretch;width:100%;min-width:0;height:100%;min-height:2rem;display:flex;overflow:hidden}.superlabel.svelte-gmb99o{color:var(--spectrum-global-color-gray-600);justify-content:space-between;align-items:center;gap:1rem;padding-left:2px;font-family:inter,sans-serif;line-height:1.65rem;display:flex;overflow:hidden}.superlabel.left.svelte-gmb99o{flex:0 1 var(--label-width);flex-direction:column;justify-content:center;align-items:flex-start;gap:0;min-width:0;padding-left:0;line-height:1rem}.superlabel.left.tall.svelte-gmb99o{justify-content:flex-start;padding-top:.5rem}.superlabel.svelte-gmb99o>.label:where(.svelte-gmb99o){text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:12px;font-weight:500;overflow:hidden}.superlabel.left.svelte-gmb99o>.label:where(.svelte-gmb99o){width:100%}.superlabel.svelte-gmb99o>.label.has-interaction:where(.svelte-gmb99o){cursor:help}.superlabel.svelte-gmb99o>.error-message:where(.svelte-gmb99o){color:var(--spectrum-global-color-red-400);white-space:nowrap;font-size:10px}.plugin-error.svelte-1q1ah0h{border:1px solid var(--spectrum-global-color-red-400);background:var(--spectrum-global-color-red-100);color:var(--spectrum-global-color-red-800);box-sizing:border-box;border-radius:4px;flex-direction:column;gap:.25rem;width:100%;padding:.5rem .75rem;font-size:13px;display:flex}.plugin-error-title.svelte-1q1ah0h{font-weight:600}.plugin-error-detail.svelte-1q1ah0h{color:var(--spectrum-global-color-red-700);word-break:break-word;font-size:12px}\n/*$vite$:1*/")),document.head.appendChild(e)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}}();
+var plugin=function(e,t,n,r){Object.defineProperty(e,Symbol.toStringTag,{value:"Module"});var o,i,l,a=Object.create,s=Object.defineProperty,d=Object.getOwnPropertyDescriptor,c=Object.getOwnPropertyNames,p=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;function g(e,t={}){const n=new Set;let r;function o(n,...o){const i=t[e]?.[n]??t["*"]?.[n];return i instanceof Function?i.apply(r,o):i}function i(t,...r){const i=o(t,...r)?.valueOf();return["string","symbol"].includes(typeof i)&&i!==e&&function(t,r,i){const l={from:e,to:t,event:r,args:i};o("_exit",l),e=t,n.forEach(t=>t(e)),o("_enter",l)}(i,t,r),e}const l={};async function a(t,n=100,...r){return clearTimeout(l[t]),null===n?e:(await new Promise(e=>l[t]=setTimeout(e,n)),delete l[t],i(t,...r))}return r=new Proxy({subscribe:function(t){if(!(t instanceof Function))throw new TypeError("callback is not a function");return n.add(t),t(e),()=>n.delete(t)}},{get:(e,t)=>(Reflect.has(e,t)||(e[t]=i.bind(null,t),e[t].debounce=a.bind(null,t)),Reflect.get(e,t))}),o("_enter",{from:null,to:e,event:null,args:[]}),r}l=null!=(o=t)?a(p(o)):{};var f=(t=((e,t,n,r)=>{if(t&&"object"==typeof t||"function"==typeof t)for(var o,i=c(t),l=0,a=i.length;l<a;l++)o=i[l],u.call(e,o)||o===n||s(e,o,{get:(e=>t[e]).bind(null,o),enumerable:!(r=d(t,o))||r.enumerable});return e})(!i&&o&&o.__esModule?l:s(l,"default",{value:o,enumerable:!0}),o)).from_html("<i></i>"),v=t.from_html('<span class="label svelte-1mahf4q"> </span>'),h=t.from_html("<div><!> <!></div>");function m(e){if(function(e){return null==e||""===e||"default"===String(e).trim().toLowerCase()}(e))return e??null;switch(String(e).trim().toLowerCase()){case"left":case"flex-start":case"start":return"flex-start";case"center":return"center";case"right":case"flex-end":case"end":return"flex-end";default:return e}}function b(e,t){return"onhover"===e&&(null==t||""===String(t).trim()||"right"!==function(e){switch(m(e)){case"flex-end":case"end":case"right":return"right";case"center":return"center";default:return"left"}}(t))}function y(e,t=!1){return!function(e){return"cell"===e}(e)||t}function w(e,t="copyable"){return{_enter(){setTimeout(()=>e().goTo(t),400)}}}async function _(e,t){await async function(e){try{return await navigator.clipboard.writeText(e),!0}catch(t){return console.error("Failed to copy to clipboard:",t),!1}}(t)&&e().goTo("justCopied")}function x(e,t){if(null==e||""===e)return;const n=String(e),r=t?.optionColors,o=t?.constraints?.inclusion,i=function(e,t){if(!Array.isArray(t)||null==e||""===e)return-1;const n=String(e),r=t.indexOf(e);return r>=0?r:t.findIndex(e=>String(e)===n)}(e,o);if(Array.isArray(r)&&i>=0){const e=r[i];if(e)return e}return r&&!Array.isArray(r)&&r[n]?r[n]:void 0}function k(){0}var T=t.from_html('<i class="ph ph-warning error-icon svelte-5ns2ht" title="Error"></i>'),C=t.from_html("<i></i>"),O=t.from_html('<i class="ph ph-x control-icon clear-icon svelte-5ns2ht" role="button" title="Clear value"></i>'),S=t.from_html("<i></i>"),A=t.from_html('<div class="buttons svelte-5ns2ht"></div>'),D=t.from_html('<i role="button" tabindex="-1" title="Copy"></i>'),$=t.from_html("<div><!> <!> <!> <!> <!> <!> <!></div>");function E(e,r){t.push(r,!0);const o=()=>t.store_get(r.csm,"$csm",i),[i,l]=t.setup_stores(),a=()=>{try{"view"===o()&&!0,r.csm.toggle()}finally{0}};let s=t.prop(r,"role",3,"form"),d=t.prop(r,"clearable",3,!1),c=t.prop(r,"error",3,!1),p=t.prop(r,"isDirty",3,!1),u=t.prop(r,"multirow",3,!1),g=t.prop(r,"copyIcon",3,"always"),m=t.prop(r,"align",3,void 0),w=t.prop(r,"controlIcon",3,void 0);t.prop(r,"grabber",3,!1);let _=t.prop(r,"naked",3,!1),x=t.prop(r,"popupOpen",3,void 0),E=t.prop(r,"anchor",15,null),P=t.prop(r,"buttons",3,void 0),j=t.derived(()=>r.tabindex??("view"==o()||"copyable"==o()?0:-1)),N=t.derived(()=>"justCopied"===o()?"ph ph-check":"ph ph-copy"),I=t.derived(()=>b(g(),m())),F=t.derived(()=>"editing"===o()),M=t.derived(()=>!!r.icon&&y(s(),t.get(F)));var V=$();let q,W;var L=t.child(V),B=e=>{var n=T();t.append(e,n)};t.if(L,e=>{c()&&e(B)});var H=t.sibling(L,2),J=e=>{var n=C();t.template_effect(()=>{t.set_class(n,1,"ph ph-"+r.icon+" field-icon","svelte-5ns2ht"),t.set_attribute(n,"title",r.icon)}),t.append(e,n)};t.if(H,e=>{t.get(M)&&e(J)});var U=t.sibling(H,2);t.snippet(U,()=>r.children??t.noop);var R=t.sibling(U,2),z=e=>{var n=O();t.event("mousedown",n,t.preventDefault(function(...e){r.csm.clear?.apply(this,e)})),t.append(e,n)};t.if(R,e=>{d()&&e(z)});var G=t.sibling(R,2),Z=e=>{var n=S();t.template_effect(()=>t.set_class(n,1,w()+" control-icon","svelte-5ns2ht")),t.event("mousedown",n,t.preventDefault(t.stopPropagation(function(...e){k?.apply(this,e)})),!0),t.event("click",n,t.preventDefault(t.stopPropagation(a))),t.append(e,n)};t.if(G,e=>{"view"!==o()&&"editing"!=o()||!w()||e(Z)});var Q=t.sibling(G,2),K=e=>{var o=A();t.each(o,21,P,t.index,(e,r)=>{!function(e,r){t.push(r,!0);const o=(0,n.createEventDispatcher)();let i=t.prop(r,"selected",3,!1),l=t.prop(r,"disabled",3,!1),a=t.prop(r,"viewMode",3,!1),s=t.prop(r,"iconOnly",3,!1),d=t.prop(r,"color",3,void 0),c=t.prop(r,"icon",3,void 0),p=t.prop(r,"label",3,""),u=t.prop(r,"fieldbutton",3,!1),g=t.prop(r,"variant",3,"default");var m=h();let b,y;var w=t.child(m),_=e=>{var n=f();t.template_effect(()=>t.set_class(n,1,t.clsx(c()),"svelte-1mahf4q")),t.append(e,n)};t.if(w,e=>{c()&&e(_)});var x=t.sibling(w,2),k=e=>{var n=v(),r=t.child(n,!0);t.reset(n),t.template_effect(()=>t.set_text(r,p())),t.append(e,n)};t.if(x,e=>{!s()&&p()&&e(k)}),t.reset(m),t.template_effect(()=>{b=t.set_class(m,1,"simple-button svelte-1mahf4q",null,b,{selected:i(),disabled:l(),"icon-only":s(),"view-mode":a(),"field-button":u(),warning:"warning"===g()}),y=t.set_style(m,"",y,{"--option-color":d()})}),t.event("click",m,function(){l()||a()||o("click")}),t.append(e,m),t.pop()}(e,t.spread_props({fieldbutton:!0,get label(){return t.get(r).text}},()=>t.get(r),{$$events:{click(...e){t.get(r).onClick?.apply(this,e)}}}))}),t.reset(o),t.event("mousedown",o,t.preventDefault(function(e){t.bubble_event.call(this,r,e)})),t.append(e,o)};t.if(Q,e=>{P()?.length&&"copyable"!==o()&&"justCopied"!==o()&&e(K)});var X=t.sibling(Q,2),Y=e=>{var n=D();t.template_effect(()=>t.set_class(n,1,t.get(N)+" copy-icon","svelte-5ns2ht")),t.event("click",n,t.preventDefault(t.stopPropagation(function(...e){r.csm.copy?.apply(this,e)}))),t.append(e,n)};t.if(X,e=>{"copyable"!==o()&&"justCopied"!==o()||e(Y)}),t.reset(V),t.bind_this(V,e=>E(e),()=>E()),t.template_effect(()=>{t.set_attribute(V,"id",r.id),t.set_attribute(V,"tabindex",t.get(j)),q=t.set_class(V,1,`super-cell ${s()??""} ${o()??""}`,"svelte-5ns2ht",q,{error:c(),"with-popup":void 0!==x(),open:x(),multirow:u(),"naked-field":_(),"icon-on-hover":"copyable"===o()&&t.get(I),isDirty:p()}),t.set_attribute(V,"title","copyable"===o()?"Click copy icon to copy":void 0),W=t.set_style(V,"",W,{color:r.color,background:r.background})}),t.event("focusin",V,function(...e){r.csm.focus?.apply(this,e)}),t.event("focusout",V,function(...e){r.csm.focusout?.apply(this,e)}),t.event("click",V,function(...e){r.csm.click?.apply(this,e)}),t.event("keydown",V,function(...e){r.csm.keydown?.apply(this,e)}),t.append(e,V),t.pop(),l()}function P(e,n){var r=t.comment(),o=t.first_child(r);t.snippet(o,()=>n.children??t.noop),t.append(e,r)}var j=[".flatpickr-calendar",".spectrum-Popover",".download-js-link"],N=[],I=e=>{if(!e.target.closest('[data-ignore-click-outside="true"]')){for(let t of j)if(e.target.closest(t))return;N.forEach(t=>{if(t.element.contains(e.target))return;const n=null!=t.anchor.closest(".spectrum-Underlay");(null==e.target.closest(".spectrum-Underlay")||n)&&t.callback?.(e)})}};document.documentElement.addEventListener("click",I,!0),document.documentElement.addEventListener("contextmenu",I,!0);var F=(e,t)=>{const n=Math.random(),r=t=>{const r=t?.callback||t;((e,t,n,r)=>{let o=N.find(t=>t.id===e);o?o.callback=r:N.push({id:e,element:t,anchor:n,callback:r})})(n,e,t?.anchor||e,r)};return r(t),{update:r,destroy:()=>(e=>{N=N.filter(t=>t.id!==e)})(n)}},M=t.from_html('<div tabindex="0" role="presentation"><!></div>');function V(e,o){t.push(o,!0);const i=(0,n.createEventDispatcher)();let l=t.prop(o,"align",3,"right"),a=t.prop(o,"open",15,!1),s=t.prop(o,"useAnchorWidth",3,!1),d=t.prop(o,"dismissible",3,!0),c=t.prop(o,"offset",3,5),p=t.prop(o,"animate",3,!0),u=t.prop(o,"showPopover",3,!0),g=t.prop(o,"clickOutsideOverride",3,!1),f=t.prop(o,"ignoreAnchor",3,!0),v=t.prop(o,"popup",15),h=t.derived(()=>o.portalTarget||".spectrum");const m=()=>{i("open"),a(!0)},b=()=>{i("close"),a(!1)},y=e=>{if(!g()&&a()){let t=e.target,n=!1;for(;!n&&t&&t.parentNode;)n=t===o.anchor,t=t.parentNode;(!n||n&&!f())&&b()}};function w(e){g()&&a()&&"Escape"===e.key&&b()}var _={show:m,hide:b,toggle:()=>{a()?b():m()},hasFocus:()=>v()?.matches(":focus-within")},x=t.comment(),k=t.first_child(x),T=e=>{!function(e,r){t.push(r,!0);const o=t.prop(r,"disabled",3,!1);t.user_effect(()=>{let e,t;if(!o()){if(r.target)return t="string"==typeof r.target?document.querySelector(r.target):r.target,t&&(e=(0,n.mount)(P,{target:t,props:{children:r.children}})),()=>{e&&(0,n.unmount)(e)};console.warn(`[svelte-portal] Invalid Portal target: ${r.target}`)}});var i=t.comment(),l=t.first_child(i),a=e=>{var n=t.comment(),o=t.first_child(n);t.snippet(o,()=>r.children),t.append(e,n)};t.if(l,e=>{o()&&e(a)}),t.append(e,i),t.pop()}(e,{get target(){return t.get(h)},children:(e,n)=>{var i=M();let g;var f=t.child(i);t.snippet(f,()=>o.children??t.noop),t.reset(i),t.bind_this(i,e=>v(e),()=>v()),t.action(i,(e,t)=>function(e,t){let n,r=t,o=null,i="",l=!1;const a=()=>{d(r)},s=()=>{const{anchor:t}=r;if(!t)return void(o=requestAnimationFrame(s));if(!t.isConnected)return void(l||(l=!0,e.dispatchEvent(new CustomEvent("anchorlost",{bubbles:!1}))));l=!1;const n=`${(a=t.getBoundingClientRect()).top},${a.left},${a.width},${a.height}`;var a;n!==i&&(i=n,d(r)),o=requestAnimationFrame(s)},d=t=>{const{anchor:n,align:r,maxHeight:o,maxWidth:i,minWidth:l=0,useAnchorWidth:a,offset:s=5,customUpdate:d,offsetBelow:c}=t;if(!n||!n.isConnected)return;const p=n.getBoundingClientRect(),u=e.getBoundingClientRect();let g={maxHeight:null,minWidth:null,maxWidth:i,left:null,top:null};"function"==typeof d?g=d(p,u,g):("right-outside"===r||"left-outside"===r?g.top=p.top:window.innerHeight-p.bottom<(o||50)?(g.top=p.top-u.height-s,g.maxHeight=o||240):(g.top=p.bottom+(c||s),g.maxHeight=o||window.innerHeight-p.bottom-20),!i&&a&&(g.maxWidth=p.width),a?g.minWidth=Math.max(l,p.width):l&&(g.minWidth=l),g.left="right"===r?p.left+p.width-u.width:"right-outside"===r?p.right+s:"left-outside"===r?p.left-u.width-s:p.left),Object.entries(g).forEach(([t,n])=>{e.style[t]=null!=n?`${n.toFixed(0)}px`:null})},c=t=>{r=t,i="",n&&n.disconnect();const{anchor:o}=t;o&&(n=new ResizeObserver(()=>d(t)),n.observe(o),n.observe(e),n.observe(document.body),d(t))};return e.style.position="fixed",e.style.zIndex="9999",document.addEventListener("scroll",a,!0),c(t),o=requestAnimationFrame(s),{update:c,destroy(){o&&(cancelAnimationFrame(o),o=null),n&&n.disconnect(),document.removeEventListener("scroll",a,!0)}}}?.(e,t),()=>({anchor:o.anchor,align:l(),maxHeight:o.maxHeight,maxWidth:o.maxWidth,minWidth:o.minWidth,useAnchorWidth:s(),offset:c(),offsetBelow:o.offsetBelow,customUpdate:o.handlePositionUpdate})),t.action(i,(e,t)=>F?.(e,t),()=>({callback:d()?y:()=>{},anchor:o.anchor})),t.effect(()=>t.event("keydown",i,w)),t.effect(()=>t.event("focusout",i,function(...e){o.onFocusout?.apply(this,e)})),t.effect(()=>t.event("anchorlost",i,b)),t.template_effect(()=>{g=t.set_class(i,1,"spectrum-Popover is-open "+(o.className??""),"svelte-1vbe9zl",g,{customZindex:o.customZindex,"hide-popover":a()&&!u()}),t.set_style(i,`height: ${o.customHeight??""}; --customZindex: ${o.customZindex??""};`)}),t.transition(3,i,()=>r.fly,()=>({y:-20,duration:p()?350:0})),t.append(e,i)},$$slots:{default:!0}})};return t.if(k,e=>{a()&&e(T)}),t.append(e,x),t.pop(_)}var q=t.from_html('<span class="placeholder-text svelte-fbxj89"> </span>'),W=t.from_html('<i class="ph ph-x remove-icon svelte-fbxj89"></i>'),L=t.from_html('<div class="tag svelte-fbxj89"><span class="tag-wrap svelte-fbxj89"><span> </span></span> <!></div>'),B=t.from_html('<input class="editor tag-input svelte-fbxj89" type="text"/>'),H=t.from_html('<div><div class="value svelte-fbxj89"><div><!> <!> <!></div></div></div>'),J=t.from_html('<div class="option loading svelte-fbxj89"><i class="ph ph-spinner spin"></i> Loading...</div>'),U=t.from_html('<div><span class="svelte-fbxj89"> </span></div>'),R=t.from_html('<div class="option loading svelte-fbxj89"><i class="ph ph-spinner spin"></i> Loading more...</div>'),z=t.from_html("<!> <!>",1),G=t.from_html('<div class="popup svelte-fbxj89"><div class="options svelte-fbxj89"><!></div></div>'),Z=t.from_html("<!> <!>",1);function Q(e,r){t.push(r,!0);const o=()=>t.store_get(Ee,"$csm",l),i=()=>t.store_get(t.get(j),"$fetch",l),[l,a]=t.setup_stores(),s=(0,n.createEventDispatcher)(),{API:d,QueryUtils:c,fetchData:p}=(0,n.getContext)("sdk");let u=t.prop(r,"autofocus",3,!1),f=t.state(null),v=t.state(null),h=t.state(null),m=t.state(null),b=t.state(t.proxy([])),k=t.state(t.proxy([])),T=t.state(-1),C=t.state(void 0),O=t.state(void 0),S=t.state(15),A=t.state(!0),D=t.state(!1),$=t.state(t.proxy([])),P=t.state(""),j=t.state(void 0),N=t.state(""),I=t.state(""),F=t.derived(()=>r.cellOptions??{}),M=t.derived(()=>t.get(F).suggestions),Q=t.derived(()=>t.get(F).valueColumn),K=t.derived(()=>t.get(F).role??"form"),X=t.derived(()=>t.get(F).readonly),Y=t.derived(()=>t.get(F).disabled),ee=t.derived(()=>t.get(F).copyable),te=t.derived(()=>t.get(F).copyIcon??"always"),ne=t.derived(()=>t.get(F).error),re=t.derived(()=>t.get(F).color),oe=t.derived(()=>t.get(F).background),ie=t.derived(()=>t.get(F).placeholder),le=t.derived(()=>t.get(F).showDirty),ae=t.derived(()=>t.get(F).align),se=t.derived(()=>t.get(F).datasource),de=t.derived(()=>t.get(F).filter),ce=t.derived(()=>t.get(F).debounce??null),pe=t.derived(()=>t.get($).length<1),ue=t.derived(()=>"editing"===o()),ge=t.derived(()=>t.get(F).dirty),fe=t.derived(()=>t.get(ue)&&JSON.stringify(t.get($))!==JSON.stringify(Array.isArray(r.value)?r.value:r.value?[r.value]:[])),ve=t.state(0),he=t.derived(()=>t.get(k).filter(e=>!t.get($).includes(e))),me=t.derived(()=>t.get(M)&&t.get(ue)&&t.get(P).trim().length>0&&t.get(he).length>0),be=t.derived(()=>{const e={};for(const n of[...t.get(b),...t.get($)])void 0===e[n]&&(e[n]=x(n,r.fieldSchema));return e});const ye=()=>t.get($).join(", "),we=()=>{s("change",[...t.get($)]),s("labelChange",ye()||null)},_e=e=>{if(!e?.length)return;const n=new Set(t.get($).map(e=>String(e||"").toLowerCase().trim())),r=[];e.forEach(e=>{const t=String(e||"").trim();t&&!n.has(t.toLowerCase())&&(r.push(t),n.add(t.toLowerCase()))}),r.length&&(t.set($,[...t.get($),...r],!0),Ee.change())},xe=()=>{t.set(P,""),t.get(h)&&(t.get(h).value=""),t.set(T,-1)},ke=()=>{const e=(t.get(h)?.value??t.get(P)).trim();!e&&t.get(T)<0||(t.get(T)>-1&&t.get(he)[t.get(T)]?_e([t.get(he)[t.get(T)]]):e&&_e(e.split(",").map(e=>e.trim()).filter(Boolean)),xe())},Te=e=>{const n=e?[...t.get(de)||[],{field:t.get(Q),type:"string",operator:"fuzzy",value:e,valueType:"Value"}]:t.get(de)||[];return c.buildQuery(n)},Ce=e=>{t.set(P,e,!0),t.get(M)&&((e=>{t.get(j)&&t.get(M)&&(clearTimeout(t.get(O)),t.set(O,setTimeout(()=>{const n=Te(e),r=JSON.stringify({query:n,limit:t.get(S),datasource:t.get(se)});r!==t.get(N)&&(t.set(D,!1),t.set(N,r,!0),t.get(j).update({query:n,limit:t.get(S)}))},250),!0))})(e),t.set(T,-1))},Oe=()=>{Ce(t.get(h)?.value??"")},Se=e=>{const n=e.target;n.scrollTop+n.clientHeight>=n.scrollHeight-50&&(()=>{if(!t.get(j)||i()?.loading)return;if((i()?.rows?.length??0)<t.get(S))return;t.set(D,!0),t.set(S,t.get(S)+100);const e=Te(t.get(P)),n=JSON.stringify({query:e,limit:t.get(S),datasource:t.get(se)});t.set(N,n,!0),t.get(j).update({query:e,limit:t.get(S)})})()},Ae=async()=>{t.get(T)<0||!t.get(m)||(await(0,n.tick)(),t.get(m).querySelector(".option.highlighted")?.scrollIntoView({block:"nearest"}))},De=e=>{const n=t.get(he);if("ArrowDown"===e.key){if(!t.get(M))return;if(e.preventDefault(),!t.get(me)){if(!(t.get(h)?.value??t.get(P)).trim())return;return void t.set(T,n.length?0:-1,!0)}return t.set(T,Math.min(t.get(T)+1,n.length-1),!0),t.get(T)<0&&n.length&&t.set(T,0),t.set(T,Math.min(t.get(T),Math.max(n.length-1,-1)),!0),void Ae()}if("ArrowUp"===e.key){if(!t.get(M)||!t.get(me))return;return e.preventDefault(),t.set(T,Math.max(t.get(T)-1,0),!0),void Ae()}return"Enter"===e.key?(e.preventDefault(),ke(),void setTimeout(()=>t.get(h)?.focus(),0)):"Tab"!==e.key?"Escape"===e.key?(e.preventDefault(),e.stopPropagation(),void(t.get(me)?(t.set(T,-1),t.get(h)?.focus()):(t.set($,Array.isArray(r.value)?[...r.value]:r.value?[r.value]:[],!0),xe(),t.get(f)?.blur(),Ee.goTo("view")))):void("Backspace"===e.key&&!(t.get(h)?.value??t.get(P))&&t.get($).length&&(e.preventDefault(),t.set($,t.get($).slice(0,-1),!0),Ee.change())):void(t.get(me)&&t.set(T,-1))},$e=e=>{e.stopPropagation(),De(e)},Ee=g("view",{"*":{goTo:e=>e,copy(){},click(){},toggle(){}},view:{focus:()=>{if(!t.get(X)&&!t.get(Y))return"editing"}},editing:{_enter:()=>{t.set($,Array.isArray(r.value)?[...r.value]:r.value?[r.value]:[],!0),s("enteredit"),setTimeout(()=>t.get(h)?.focus(),0)},_exit:()=>{(t.get(h)?.value??t.get(P)).trim()&&ke(),xe(),s("exitedit")},change(){t.get(ce)&&(clearTimeout(t.get(C)),t.set(C,setTimeout(()=>we(),t.get(ce)),!0))},submit(){t.get(fe)&&!t.get(ce)&&we()},cancel:()=>(clearTimeout(t.get(C)),t.set($,Array.isArray(r.value)?[...r.value]:r.value?[r.value]:[],!0),xe(),"view"),focusout:e=>{const n=e.relatedTarget;if(n!==t.get(h)&&!t.get(v)?.contains(n))return t.get(ce)&&t.get(fe)?(clearTimeout(t.get(C)),we()):this.submit(),"view"},popupFocusout:e=>{if(!t.get(f)?.contains(e.relatedTarget))return this.submit(),"view"},popupKeydown(e){if("Tab"===e.key)return e.preventDefault(),t.get(h)?.focus(),t.set(T,-1),"view";De(e)},keydown:De},readonly:{},disabled:{},copyable:{copy(){_(()=>Ee,ye())},keydown(e){"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.copy())}},justCopied:w(()=>Ee)});t.user_effect(()=>{if("editing"===o())return;const e=Array.isArray(r.value)?[...r.value]:r.value?[r.value]:[];JSON.stringify(e)!==JSON.stringify(t.get($))&&t.set($,e,!0)}),t.user_effect(()=>{if(!t.get(M)||!t.get(se))return;const e=c.buildQuery(t.get(de)),r=JSON.stringify({query:e,datasource:t.get(se)});(0,n.untrack)(()=>{if(!t.get(j))return t.set(A,!0),t.set(D,!1),t.set(I,r,!0),t.set(N,JSON.stringify({query:e,limit:t.get(S),datasource:t.get(se)}),!0),void t.store_unsub(t.set(j,p({API:d,datasource:t.get(se),options:{query:e,limit:t.get(S)}}),!0),"$fetch",l);r!==t.get(I)&&(t.set(I,r,!0),t.set(P,""),t.get(h)&&(t.get(h).value=""),t.set(T,-1),t.set(S,15),t.set(N,JSON.stringify({query:e,limit:t.get(S),datasource:t.get(se)}),!0),t.get(j).update({query:e,limit:t.get(S)}))})}),t.user_effect(()=>{if(!t.get(M)||!t.get(j))return;const e=i()?.rows;(0,n.untrack)(()=>(e=>{let n;t.get(D)?(e?.length&&(n=e.map(e=>String(e[t.get(Q)])),JSON.stringify(n)!==JSON.stringify(t.get(b))&&(t.set(b,n,!0),t.set(k,[...n],!0))),t.set(D,!1)):(n=e?.length?e.map(e=>String(e[t.get(Q)])):[],JSON.stringify(n)!==JSON.stringify(t.get(b))&&(t.set(b,n,!0),t.set(k,[...n],!0))),t.get(A)&&t.set(A,!1)})(e))}),t.user_effect(()=>{t.get(Y)?Ee.goTo("disabled"):t.get(X)&&t.get(ee)&&!t.get(pe)?Ee.goTo("copyable"):t.get(X)?Ee.goTo("readonly"):Ee.goTo("view"),t.set(ve,t.get(X)||t.get(Y)?-1:0,!0)}),t.user_effect(()=>(u()&&setTimeout(()=>Ee.focus(),30),()=>{t.get(C)&&clearTimeout(t.get(C)),t.get(O)&&clearTimeout(t.get(O))}));var Pe=Z(),je=t.first_child(Pe);{let e=t.derived(()=>t.get(ge)&&t.get(le));E(je,{get id(){return r.id},get csm(){return Ee},get role(){return t.get(K)},get error(){return t.get(ne)},get copyIcon(){return t.get(te)},get align(){return t.get(ae)},multirow:!0,get isDirty(){return t.get(e)},get popupOpen(){return t.get(me)},get color(){return t.get(re)},get background(){return t.get(oe)},get tabindex(){return t.get(ve)},get anchor(){return t.get(f)},set anchor(e){t.set(f,e,!0)},children:(e,n)=>{var r=H();let o;var i=t.child(r),l=t.child(i);let a,s;var d=t.child(l),c=e=>{var n=q(),r=t.child(n,!0);t.reset(n),t.template_effect(e=>t.set_text(r,e),[()=>function(e,t,n=!1){return y(t,n)?null==e?"":String(e):""}(t.get(ie)||"Add some Tags",t.get(K),t.get(ue))]),t.append(e,n)},p=t.derived(()=>t.get(pe)&&!t.get(ue)&&y(t.get(K),t.get(ue)));t.if(d,e=>{t.get(p)&&e(c)});var u=t.sibling(d,2);t.each(u,18,()=>t.get($),e=>e,(e,n)=>{var r=L();let o;var i=t.child(r),l=t.child(i),a=t.child(l,!0);t.reset(l),t.reset(i);var s=t.sibling(i,2),d=e=>{var r=W();t.event("mousedown",r,t.preventDefault(t.stopPropagation(()=>(e=>{if(t.get(Y)||t.get(X))return;const n="number"==typeof e?t.get(he)[e]:e;if(!n)return;const r=t.get($).indexOf(n);r>-1&&(t.set($,t.get($).filter((e,t)=>t!==r),!0),Ee.change())})(n)))),t.append(e,r)};t.if(s,e=>{t.get(ue)&&e(d)}),t.reset(r),t.template_effect(()=>{o=t.set_style(r,"",o,{"--option-color":t.get(be)[n]}),t.set_text(a,n)}),t.append(e,r)});var g=t.sibling(u,2),f=e=>{var n=B();t.remove_input_defaults(n),t.bind_this(n,e=>t.set(h,e),()=>t.get(h)),t.template_effect(()=>{t.set_attribute(n,"tabindex",t.get(ve)),t.set_attribute(n,"placeholder",t.get(pe)?t.get(ie)||"Add tag...":""),t.set_value(n,t.get(P))}),t.event("input",n,Oe),t.event("keydown",n,$e),t.event("focusout",n,function(...e){Ee.focusout?.apply(this,e)}),t.append(e,n)};t.if(g,e=>{t.get(ue)&&e(f)}),t.reset(l),t.reset(i),t.reset(r),t.template_effect(e=>{o=t.set_class(r,1,"value-contents svelte-fbxj89",null,o,e),a=t.set_class(l,1,"tags svelte-fbxj89",null,a,{editing:t.get(ue)}),s=t.set_style(l,"",s,{"justify-content":t.get(ae)??"flex-start"})},[()=>({placeholder:t.get(pe)&&!t.get(ue)&&y(t.get(K),t.get(ue))})]),t.append(e,r)},$$slots:{default:!0}})}var Ne=t.sibling(je,2),Ie=e=>{V(e,{useAnchorWidth:!0,maxHeight:250,get anchor(){return t.get(f)},get open(){return t.get(me)},dismissible:!1,children:(e,n)=>{var o=G(),l=t.child(o),a=t.child(l),s=e=>{var n=J();t.append(e,n)},d=e=>{var n=z(),r=t.first_child(n);t.each(r,18,()=>t.get(he),e=>e,(e,n,r)=>{var o=U();let i,l;var a=t.child(o),s=t.child(a,!0);t.reset(a),t.reset(o),t.template_effect(()=>{i=t.set_class(o,1,"option text svelte-fbxj89",null,i,{highlighted:t.get(T)===t.get(r)}),l=t.set_style(o,"",l,{"--option-color":t.get(be)[n]}),t.set_text(s,n)}),t.event("mousedown",o,t.preventDefault(()=>(e=>{_e([e]),xe(),setTimeout(()=>t.get(h)?.focus(),0)})(n))),t.event("mouseenter",o,()=>t.set(T,t.get(r),!0)),t.append(e,o)});var o=t.sibling(r,2),l=e=>{var n=R();t.append(e,n)};t.if(o,e=>{i()?.loading&&e(l)}),t.append(e,n)};t.if(a,e=>{i()?.loading&&!t.get(he).length?e(s):t.get(he).length&&e(d,1)}),t.reset(l),t.bind_this(l,e=>t.set(m,e),()=>t.get(m)),t.reset(o),t.bind_this(o,e=>t.set(v,e),()=>t.get(v)),t.event("wheel",l,e=>e.stopPropagation()),t.event("scroll",l,Se),t.event("mousedown",l,t.preventDefault(t.stopPropagation(function(e){t.bubble_event.call(this,r,e)}))),t.event("focusout",o,function(...e){Ee.popupFocusout?.apply(this,e)}),t.event("keydown",o,function(...e){Ee.popupKeydown?.apply(this,e)}),t.append(e,o)},$$slots:{default:!0}})};t.if(Ne,e=>{t.get(ue)&&t.get(M)&&t.get(me)&&e(Ie)}),t.append(e,Pe),t.pop(),a()}function K(e){return null==e?{active:!0,text:"",delay:500,whenTruncated:!0,position:"above-center"}:"string"==typeof e?{active:e.length>0,text:e,delay:500,whenTruncated:!1,position:"above-center"}:!1===e.enabled?{active:!1,text:"",delay:500,whenTruncated:!0,position:"above-center"}:{active:!0,text:e.text??"",delay:e.delay??500,whenTruncated:e.whenTruncated??!0,position:e.position??"above-center"}}var X=null,Y=null,ee=!1;function te(e,t,n=500,r=!0,o="above-center"){r&&e.scrollWidth<=e.offsetWidth||(Y&&clearTimeout(Y),Y=setTimeout(()=>{X&&X.remove();const n=function(){const e=document.createElement("div");return e.className="tooltip-popup",e.setAttribute("role","tooltip"),(document.getElementById("app-root")||document.body).appendChild(e),e}();n.textContent=t,function(e,t,n){const r=e.getBoundingClientRect(),[o,i]=n.split("-");let l="above"===o?t.top-r.height-4:t.bottom+4,a=t.left;"center"===i?a=t.left+(t.width-r.width)/2:"end"===i&&(a=t.right-r.width);const s=window.innerWidth-r.width-4,d=window.innerHeight-r.height-4;e.style.top=`${Math.max(4,Math.min(l,d))}px`,e.style.left=`${Math.max(4,Math.min(a,s))}px`}(n,e.getBoundingClientRect(),o),X=n},n))}function ne(){Y&&(clearTimeout(Y),Y=null),X&&(X.remove(),X=null)}function re(e,t){!function(){if(ee)return;ee=!0;const e=document.createElement("style");e.textContent="\n\t\t.tooltip-popup {\n      background: var(--spectrum-global-color-gray-700);\n      color: var(--spectrum-global-color-gray-50);\n\t\t\tposition: fixed !important;\n\t\t\tz-index: 10000 !important;\n\t\t\tmax-width: 20rem;\n\t\t\tpadding: 0.35rem 0.5rem;\n\t\t\tborder-radius: 0.25rem;\n\t\t\tfont-family: 'inter', sans-serif;\n\t\t\tfont-size: 11px;\n\t\t\tline-height: 1.35;\n\t\t\twhite-space: normal;\n\t\t\tword-break: break-word;\n\t\t\toverflow-wrap: break-word;\n\t\t\tbox-shadow: 0 2px 8px rgb(0 0 0 / 0.18);\n\t\t\tpointer-events: none;\n\t\t\tdisplay: block !important;\n\t\t\tvisibility: visible !important;\n\t\t\topacity: 1 !important;\n\t\t}\n\t",document.head.appendChild(e)}();let n,r=K(t);const o=()=>{n&&(e.removeEventListener("mouseenter",n),n=void 0),e.removeEventListener("mouseleave",ne),ne()},i=()=>{o(),r.active&&(n=()=>{const t=r.whenTruncated?r.text||e.textContent||"":r.text||"";t&&te(e,t,r.delay,r.whenTruncated,r.position)},e.addEventListener("mouseenter",n),e.addEventListener("mouseleave",ne))};return i(),{update(e){r=K(e),i()},destroy(){o()}}}var oe=t.from_html('<div class="error-message svelte-gmb99o"> </div>'),ie=t.from_html("<div><div> </div> <!></div>"),le=t.from_html('<div><!> <div class="inline-cells svelte-gmb99o"><!></div></div>');var ae=t.from_html("<div><!></div>");function se(e,r){t.push(r,!0);const o=()=>t.store_get(s,"$component",i),[i,l]=t.setup_stores(),{styleable:a}=(0,n.getContext)("sdk"),s=(0,n.getContext)("component"),d=(0,n.getContext)("form"),c=(0,n.getContext)("form-step"),p=(0,n.getContext)("field-group"),u=(0,n.getContext)("field-group-label-width"),g=(0,n.getContext)("field-group-disabled"),f=(0,n.getContext)("field-group-readonly");let v,h=t.prop(r,"field",3,"Tags Field"),m=t.prop(r,"labelPosition",3,"fieldGroup"),b=t.prop(r,"onChange",3,void 0),y=t.prop(r,"debounced",3,!1),w=t.prop(r,"debounceDelay",3,750),_=t.prop(r,"validation",3,void 0),x=t.prop(r,"label",3,"Tags Field"),k=t.prop(r,"span",3,6),T=t.prop(r,"placeholder",3,"Choose Tags"),C=t.prop(r,"helpText",3,void 0),O=t.prop(r,"defaultValue",3,void 0),S=t.prop(r,"disabled",3,!1),A=t.prop(r,"readonly",3,!1),D=t.prop(r,"copyable",3,!1),$=t.prop(r,"copyIcon",3,void 0),E=t.prop(r,"datasource",3,void 0),P=t.prop(r,"limit",3,void 0),j=t.prop(r,"filter",3,void 0),N=t.prop(r,"valueColumn",3,void 0),I=t.prop(r,"suggestions",3,!1),F=t.prop(r,"showDirty",3,!1),M=t.state(void 0),V=t.state(void 0),q=t.state(t.proxy({})),W=t.state(void 0),L=t.derived(()=>K(t.get(M)?.value)),B=t.derived(()=>t.get(M)?.fieldId),H=t.derived(()=>t.get(M)?.error),J=t.derived(()=>c&&t.store_get(c,"$formStepContext",i)||1),U=t.derived(()=>(A()||t.store_get(f,"$groupReadonly",i)||t.get(M)?.readonly)??!1),R=t.derived(()=>(S()||t.store_get(g,"$groupDisabled",i)||t.get(M)?.disabled)??!1),z=t.derived(()=>void 0!==p&&"fieldGroup"==m()?p:"fieldGroup"==m()?"above":m()),G=t.derived(()=>({...o().styles,normal:{...o().styles.normal,overflow:"hidden","grid-column":`span ${Number(k())||6}`}})),Z=t.derived(()=>({disabled:t.get(R),readonly:t.get(U),copyable:D(),copyIcon:$(),debounce:y()?w():null,placeholder:T(),defaultValue:O(),error:t.get(M)?.error,suggestions:I(),datasource:E(),limit:P(),filter:j(),valueColumn:N(),dirty:t.get(M)?.dirty,showDirty:F()}));const K=e=>Array.isArray(e)?e:[];t.user_effect(()=>(S(),A(),h(),(0,n.untrack)(()=>{v=d?.formApi?.registerField(h(),"array",O(),S(),A(),_(),t.get(J))}),()=>{v?.fieldApi?.deregister()})),t.user_effect(()=>((0,n.untrack)(()=>{t.set(W,v?.subscribe(e=>{t.set(M,e?.fieldState,!0),t.set(V,e?.fieldApi,!0),t.set(q,e?.fieldSchema??{},!0)}),!0)}),()=>{t.get(W)?.()})),t.user_effect(()=>{O()&&(0,n.untrack)(()=>{t.get(V)?.setValue(O())})});const X=e=>{const n=e.detail;t.get(V)?.setValue(n),b()?.({value:n})};var Y=ae();!function(e,n){let r=t.derived(()=>"left"==n.labelPos?n.labelWidth?n.labelWidth:"6rem":"auto");var o=le();let i,l;var a=t.child(o),s=e=>{var o=ie();let i,l;var a=t.child(o);let s;var d=t.child(a,!0);t.reset(a),t.action(a,(e,t)=>re?.(e,t),()=>({whenTruncated:!n.helpText}));var c=t.sibling(a,2),p=e=>{var r=oe(),o=t.child(r,!0);t.reset(r),t.template_effect(()=>t.set_text(o,n.error)),t.append(e,r)};t.if(c,e=>{n.error&&e(p)}),t.reset(o),t.template_effect(()=>{i=t.set_class(o,1,"superlabel svelte-gmb99o",null,i,{left:"left"==n.labelPos,tall:n.tall,error:n.error}),l=t.set_style(o,"",l,{"--label-width":t.get(r)}),s=t.set_class(a,1,"label svelte-gmb99o",null,s,{"has-interaction":!!n.helpText}),t.set_text(d,n.label||n.field)}),t.append(e,o)};t.if(a,e=>{n.labelPos&&e(s)});var d=t.sibling(a,2),c=t.child(d);t.snippet(c,()=>n.children??t.noop),t.reset(d),t.reset(o),t.template_effect(()=>{i=t.set_class(o,1,"super-field svelte-gmb99o",null,i,{"left-label":"left"==n.labelPos,multirow:n.multirow,tall:n.tall}),l=t.set_style(o,"",l,{"--field-height":n.height,"--max-height":n.maxHeight})}),t.append(e,o)}(t.child(Y),{multirow:!0,get labelPos(){return t.get(z)},get labelWidth(){return u},get field(){return h()},get label(){return x()},get error(){return t.get(H)},get helpText(){return C()},children:(e,n)=>{Q(e,{get id(){return t.get(B)},get cellOptions(){return t.get(Z)},get fieldSchema(){return t.get(q)},get value(){return t.get(L)},$$events:{change:X}})},$$slots:{default:!0}}),t.reset(Y),t.action(Y,(e,t)=>a?.(e,t),()=>t.get(G)),t.append(e,Y),t.pop(),l()}var de=t.from_html('<span class="plugin-error-detail svelte-1q1ah0h"> </span>'),ce=t.from_html('<div class="plugin-error svelte-1q1ah0h" role="alert"><span class="plugin-error-title svelte-1q1ah0h">Field failed to render</span> <!></div>');function pe(e,n){t.push(n,!0);let r=t.rest_props(n,["$$slots","$$events","$$legacy"]);var o=t.comment(),i=t.first_child(o);{const e=(e,n=t.noop)=>{var r=ce(),o=t.sibling(t.child(r),2),i=e=>{var r=de(),o=t.child(r,!0);t.reset(r),t.template_effect(()=>t.set_text(o,n().message)),t.append(e,r)};t.if(o,e=>{n()instanceof Error&&n().message&&e(i)}),t.reset(r),t.append(e,r)};t.boundary(i,{onerror:e=>{console.error("[plugin]",e)},failed:e},e=>{se(e,t.spread_props(()=>r,{children:(e,r)=>{var o=t.comment(),i=t.first_child(o);t.snippet(i,()=>n.children??t.noop),t.append(e,o)},$$slots:{default:!0}}))})}t.append(e,o),t.pop()}var ue={type:"component",metadata:{svelteMajor:5},schema:{name:"bb_component_superfieldtags",friendlyName:"Super Field - Tags",description:"A Tags Input Field component for Budibase",icon:"MultipleCheck",requiredAncestors:["form"],settings:[{type:"field/array",label:"Field",key:"field",defaultValue:"Tags Field"},{type:"text",label:"Label",key:"label",defaultValue:"Tags Field",placeholder:"Field Name",resetOn:"field"},{type:"text",label:"Placeholder",key:"placeholder",placeholder:"Choose Tags"},{type:"text",label:"Default value",key:"defaultValue",supportsConditions:!1},{type:"text",label:"Help text",key:"helpText"},{type:"validation/array",label:"Validation",key:"validation"},{type:"event",label:"On change",key:"onChange",context:[{label:"Value",key:"value"}]},{type:"boolean",label:"Debounced",key:"debounced",defaultValue:!1},{type:"boolean",label:"Disabled",key:"disabled",defaultValue:!1},{type:"boolean",label:"Read only",key:"readonly",defaultValue:!1,dependsOn:{setting:"disabled",value:!0,invert:!0},resetOn:"disabled"},{type:"boolean",label:"Copyable",key:"copyable",defaultValue:!1,dependsOn:"readonly",resetOn:["disabled","readonly"]},{tag:"style",dependsOn:"copyable",resetOn:"copyable",type:"select",label:"Copy Icon",key:"copyIcon",defaultValue:"always",options:[{label:"On Hover",value:"onhover"},{label:"Always",value:"always"}]},{tag:"style",type:"select",label:"Label Position",key:"labelPosition",showInBar:!0,barStyle:"buttons",defaultValue:"fieldGroup",options:[{label:"Disabled",value:!1,barIcon:"Cancel",barTitle:"Disabled"},{label:"Auto",value:"fieldGroup",barIcon:"Group",barTitle:"Field Group"},{label:"Above",value:"above",barIcon:"MarginTop",barTitle:"Above"},{label:"Left",value:"left",barIcon:"MarginLeft",barTitle:"Left"}]},{tag:"style",type:"number",label:"Size",key:"span",defaultValue:6,min:2},{tag:"style",type:"number",label:"Debounce Delay",key:"debounceDelay",minValue:"200",defaultValue:750,dependsOn:"debounced"},{type:"boolean",label:"Suggestions",key:"suggestions",defaultValue:!1},{type:"dataSource",label:"Data",key:"datasource",dependsOn:"suggestions",resetOn:"suggestions"},{type:"filter",label:"Filter",key:"filter",dependsOn:"suggestions",resetOn:"datasource"},{type:"field",label:"Column",key:"valueColumn",dependsOn:"suggestions",resetOn:"datasource"},{tag:"style",type:"boolean",key:"showDirty",label:"Show Dirty",defaultValue:!1}],styles:["size"]}},ge="1.0.1";if(window){const e={Component:pe,schema:ue,version:ge};window["##BUDIBASE_CUSTOM_COMPONENTS##"]||(window["##BUDIBASE_CUSTOM_COMPONENTS##"]=[]),window["##BUDIBASE_CUSTOM_COMPONENTS##"].push(e),window.registerCustomComponent&&window.registerCustomComponent(e)}var fe=pe,ve=ge;return e.Component=fe,e.schema=ue,e.version=ve,e}({},svelteInternal,svelte,svelteTransition);

package/dist/schema.json

@@ -0,0 +1,209 @@
+{
+  "type": "component",
+  "metadata": {
+    "svelteMajor": 5
+  },
+  "schema": {
+    "name": "bb_component_superfieldtags",
+    "friendlyName": "Super Field - Tags",
+    "description": "A Tags Input Field component for Budibase",
+    "icon": "MultipleCheck",
+    "requiredAncestors": [
+      "form"
+    ],
+    "settings": [
+      {
+        "type": "field/array",
+        "label": "Field",
+        "key": "field",
+        "defaultValue": "Tags Field"
+      },
+      {
+        "type": "text",
+        "label": "Label",
+        "key": "label",
+        "defaultValue": "Tags Field",
+        "placeholder": "Field Name",
+        "resetOn": "field"
+      },
+      {
+        "type": "text",
+        "label": "Placeholder",
+        "key": "placeholder",
+        "placeholder": "Choose Tags"
+      },
+      {
+        "type": "text",
+        "label": "Default value",
+        "key": "defaultValue",
+        "supportsConditions": false
+      },
+      {
+        "type": "text",
+        "label": "Help text",
+        "key": "helpText"
+      },
+      {
+        "type": "validation/array",
+        "label": "Validation",
+        "key": "validation"
+      },
+      {
+        "type": "event",
+        "label": "On change",
+        "key": "onChange",
+        "context": [
+          {
+            "label": "Value",
+            "key": "value"
+          }
+        ]
+      },
+      {
+        "type": "boolean",
+        "label": "Debounced",
+        "key": "debounced",
+        "defaultValue": false
+      },
+      {
+        "type": "boolean",
+        "label": "Disabled",
+        "key": "disabled",
+        "defaultValue": false
+      },
+      {
+        "type": "boolean",
+        "label": "Read only",
+        "key": "readonly",
+        "defaultValue": false,
+        "dependsOn": {
+          "setting": "disabled",
+          "value": true,
+          "invert": true
+        },
+        "resetOn": "disabled"
+      },
+      {
+        "type": "boolean",
+        "label": "Copyable",
+        "key": "copyable",
+        "defaultValue": false,
+        "dependsOn": "readonly",
+        "resetOn": [
+          "disabled",
+          "readonly"
+        ]
+      },
+      {
+        "tag": "style",
+        "dependsOn": "copyable",
+        "resetOn": "copyable",
+        "type": "select",
+        "label": "Copy Icon",
+        "key": "copyIcon",
+        "defaultValue": "always",
+        "options": [
+          {
+            "label": "On Hover",
+            "value": "onhover"
+          },
+          {
+            "label": "Always",
+            "value": "always"
+          }
+        ]
+      },
+      {
+        "tag": "style",
+        "type": "select",
+        "label": "Label Position",
+        "key": "labelPosition",
+        "showInBar": true,
+        "barStyle": "buttons",
+        "defaultValue": "fieldGroup",
+        "options": [
+          {
+            "label": "Disabled",
+            "value": false,
+            "barIcon": "Cancel",
+            "barTitle": "Disabled"
+          },
+          {
+            "label": "Auto",
+            "value": "fieldGroup",
+            "barIcon": "Group",
+            "barTitle": "Field Group"
+          },
+          {
+            "label": "Above",
+            "value": "above",
+            "barIcon": "MarginTop",
+            "barTitle": "Above"
+          },
+          {
+            "label": "Left",
+            "value": "left",
+            "barIcon": "MarginLeft",
+            "barTitle": "Left"
+          }
+        ]
+      },
+      {
+        "tag": "style",
+        "type": "number",
+        "label": "Size",
+        "key": "span",
+        "defaultValue": 6,
+        "min": 2
+      },
+      {
+        "tag": "style",
+        "type": "number",
+        "label": "Debounce Delay",
+        "key": "debounceDelay",
+        "minValue": "200",
+        "defaultValue": 750,
+        "dependsOn": "debounced"
+      },
+      {
+        "type": "boolean",
+        "label": "Suggestions",
+        "key": "suggestions",
+        "defaultValue": false
+      },
+      {
+        "type": "dataSource",
+        "label": "Data",
+        "key": "datasource",
+        "dependsOn": "suggestions",
+        "resetOn": "suggestions"
+      },
+      {
+        "type": "filter",
+        "label": "Filter",
+        "key": "filter",
+        "dependsOn": "suggestions",
+        "resetOn": "datasource"
+      },
+      {
+        "type": "field",
+        "label": "Column",
+        "key": "valueColumn",
+        "dependsOn": "suggestions",
+        "resetOn": "datasource"
+      },
+      {
+        "tag": "style",
+        "type": "boolean",
+        "key": "showDirty",
+        "label": "Show Dirty",
+        "defaultValue": false
+      }
+    ],
+    "styles": [
+      "size"
+    ]
+  },
+  "hash": "b3771332f08f9d66c34a374c609babd8e53a493e",
+  "version": "1.0.1"
+}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "bb_component_superfieldtags",
+  "version": "1.0.1",
+  "description": "Super Field - Tags",
+  "author": "Michael Poirazi - https://github.com/poirazis",
+  "license": "MIT",
+  "svelte": "index.js",
+  "module": "dist/plugin.min.js",
+  "schema.metadata.svelteMajor": 5,
+  "type": "module",
+  "files": [
+    "dist/",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "watch": "NODE_ENV=development vite build --watch --mode development"
+  },
+  "dependencies": {
+    "@poirazis/superlib": "latest"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/plugin.min.js",
+      "require": "./dist/plugin.min.js"
+    }
+  },
+  "devDependencies": {
+    "@budibase/backend-core": "^3.39.22",
+    "@sveltejs/vite-plugin-svelte": "^7.1.2",
+    "tar": "^7.5.16",
+    "terser": "^5.48.0",
+    "vite": "^8.1.0",
+    "vite-plugin-css-injected-by-js": "^5.0.1",
+    "vite-plugin-singlefile": "^2.3.3"
+  },
+  "peerDependencies": {
+    "svelte": "5.55.10"
+  }
+}