@humandialog/forms.svelte 1.3.17 → 1.4.1

package/components/document/editor.svelte.d.ts

@@ -16,9 +16,69 @@ declare const __propDef: {
         onRemoveImage?: undefined;
         c?: string | undefined;
         pushChangesImmediately?: boolean | undefined;
+        chat?: object | undefined;
+        readOnly?: boolean | undefined;
+        extraFrontPaletteCommands?: any[] | undefined;
+        extraBackPaletteCommands?: any[] | undefined;
+        extraInsertPaletteCommands?: any[] | undefined;
         run?: ((onStop?: undefined) => void) | undefined;
         getFormattingOperations?: ((withCaptions?: boolean) => any[]) | undefined;
+        getMarksOperations?: ((tbr?: string) => {
+            caption: string;
+            operations: any[];
+            preAction: (f: any) => void;
+            tbr: string;
+        }) | undefined;
+        getStylesOperations?: ((tbr?: string) => {
+            caption: string;
+            operations: any[];
+            preAction: (f: any) => void;
+            tbr: string;
+        }) | undefined;
+        getInsertOperations?: ((tbr?: string) => {
+            caption: string;
+            operations: any[];
+            preAction: (f: any) => void;
+            tbr: string;
+        }) | undefined;
+        scrollIntoView?: ((param: any) => void) | undefined;
         save?: (() => void) | undefined;
+        addTemporaryImage?: ((src: any) => void) | undefined;
+        replaceTemporaryImage?: ((temporarySrc: any, dataPath: any) => void) | undefined;
+        removeTemporaryImage?: ((temporarySrc: any) => void) | undefined;
+        getInnerHtml?: (() => any) | undefined;
+        setInnerHtml?: ((content: any) => void) | undefined;
+        setBold?: (() => void) | undefined;
+        setItalic?: (() => void) | undefined;
+        setUnderline?: (() => void) | undefined;
+        setStrikethrough?: (() => void) | undefined;
+        setNormal?: (() => void) | undefined;
+        setHeading?: ((level: any) => void) | undefined;
+        setCode?: (() => void) | undefined;
+        setComment?: (() => void) | undefined;
+        setQuote?: (() => void) | undefined;
+        setWarning?: (() => void) | undefined;
+        setInfo?: (() => void) | undefined;
+        setBulletList?: (() => void) | undefined;
+        setImage?: (() => void) | undefined;
+        setTable?: (() => void) | undefined;
+        setHorizontalRule?: (() => void) | undefined;
+        isActiveBold?: (() => any) | undefined;
+        isActiveItalic?: (() => any) | undefined;
+        isActiveUnderlie?: (() => any) | undefined;
+        isActiveStrikethrough?: (() => any) | undefined;
+        isActiveNormal?: (() => any) | undefined;
+        isActiveHeading?: ((level: any) => any) | undefined;
+        isActiveCode?: (() => any) | undefined;
+        isActiveComment?: (() => any) | undefined;
+        isActiveQuote?: (() => any) | undefined;
+        isActiveWarning?: (() => any) | undefined;
+        isActiveInfo?: (() => any) | undefined;
+        isActiveBulletList?: (() => any) | undefined;
+        isActiveImage?: (() => boolean) | undefined;
+        isActiveTable?: (() => void) | undefined;
+        isActiveHorizontalRule?: (() => boolean) | undefined;
+        preventBlur?: (() => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -31,6 +91,61 @@ export type EditorSlots = typeof __propDef.slots;
 export default class Editor extends SvelteComponentTyped<EditorProps, EditorEvents, EditorSlots> {
     get run(): (onStop?: undefined) => void;
     get getFormattingOperations(): (withCaptions?: boolean) => any[];
+    get getMarksOperations(): (tbr?: string) => {
+        caption: string;
+        operations: any[];
+        preAction: (f: any) => void;
+        tbr: string;
+    };
+    get getStylesOperations(): (tbr?: string) => {
+        caption: string;
+        operations: any[];
+        preAction: (f: any) => void;
+        tbr: string;
+    };
+    get getInsertOperations(): (tbr?: string) => {
+        caption: string;
+        operations: any[];
+        preAction: (f: any) => void;
+        tbr: string;
+    };
+    get scrollIntoView(): (param: any) => void;
     get save(): () => void;
+    get addTemporaryImage(): (src: any) => void;
+    get replaceTemporaryImage(): (temporarySrc: any, dataPath: any) => void;
+    get removeTemporaryImage(): (temporarySrc: any) => void;
+    get getInnerHtml(): () => any;
+    get setInnerHtml(): (content: any) => void;
+    get setBold(): () => void;
+    get setItalic(): () => void;
+    get setUnderline(): () => void;
+    get setStrikethrough(): () => void;
+    get setNormal(): () => void;
+    get setHeading(): (level: any) => void;
+    get setCode(): () => void;
+    get setComment(): () => void;
+    get setQuote(): () => void;
+    get setWarning(): () => void;
+    get setInfo(): () => void;
+    get setBulletList(): () => void;
+    get setImage(): () => void;
+    get setTable(): () => void;
+    get setHorizontalRule(): () => void;
+    get isActiveBold(): () => any;
+    get isActiveItalic(): () => any;
+    get isActiveUnderlie(): () => any;
+    get isActiveStrikethrough(): () => any;
+    get isActiveNormal(): () => any;
+    get isActiveHeading(): (level: any) => any;
+    get isActiveCode(): () => any;
+    get isActiveComment(): () => any;
+    get isActiveQuote(): () => any;
+    get isActiveWarning(): () => any;
+    get isActiveInfo(): () => any;
+    get isActiveBulletList(): () => any;
+    get isActiveImage(): () => boolean;
+    get isActiveTable(): () => void;
+    get isActiveHorizontalRule(): () => boolean;
+    get preventBlur(): () => void;
 }
 export {};

package/components/document/internal/palette.svelte

@@ -39,6 +39,8 @@ afterUpdate(
       visible && paletteElement
     ) {
       let layoutRoot = document.getElementById("__hd_svelte_layout_root");
+      if (!layoutRoot)
+        layoutRoot = document.getElementById("app");
       if (!!layoutRoot && paletteElement.parentElement != layoutRoot) {
         await tick();
         layoutRoot.appendChild(paletteElement);
@@ -98,6 +100,26 @@ export function filter(key) {
     else
       return true;
   });
+  let lastSeparatorIdx = -1;
+  let commandsNo = filtered_commands.length;
+  for (let i = 0; i < commandsNo; i++) {
+    if (filtered_commands[i].separator == true) {
+      if (i == 0) {
+        filtered_commands.splice(i, 1);
+        commandsNo--;
+        i--;
+      } else if (lastSeparatorIdx < 0)
+        lastSeparatorIdx = i;
+      else if (lastSeparatorIdx == i - 1) {
+        filtered_commands.splice(i, 1);
+        commandsNo--;
+        i--;
+      } else
+        lastSeparatorIdx = i;
+    }
+  }
+  if (filtered_commands[commandsNo - 1].separator == true)
+    filtered_commands.splice(commandsNo - 1, 1);
   if (!current_command || filtered_commands.every((v) => v != current_command)) {
     if (filtered_commands.length)
       current_command = get_operation_or_next_valid(0);

package/components/kanban/internal/kanban.card.svelte

@@ -263,7 +263,7 @@ function showAttachementIcon() {
             {#if isCardActive}
                 <p class="  text-sm sm:text-sm 
                             
-                            text-stone-400
+                            text-stone-600 dark:text-stone-400
                             
                             overflow-hidden"
                             use:editable={{
@@ -277,7 +277,7 @@ function showAttachementIcon() {
             {:else}
                 <p class=" text-sm  sm:text-sm 
                                
-                                text-stone-400
+                                text-stone-600 dark:text-stone-400
                                 
                                 overflow-hidden">
                     {item[definition.summaryAttrib]}

package/components/kanban/internal/kanban.props.svelte

@@ -118,7 +118,7 @@ async function editTags(field, propIdx) {
                     class="     h-6
                                 text-sm sm:min-h-[1rem]
                                 text-base-sm min-h-[1.5rem]
-                                text-stone-400
+                                text-stone-600 dark:text-stone-400
                                 text-right"
                                 bind:this={propElements[idx]}>
                     {item[prop.a]}

package/components/list/List.d.ts

@@ -14,6 +14,11 @@ export declare class rList_property {
     a: string;
     onSelect: Function | undefined;
     position: number | string | undefined;
+    readOnly: boolean;
+    detailed: boolean;
+    prefix: string;
+    postfix: string;
+    getter: Function | undefined;
 }
 export declare class rList_property_combo extends rList_property {
     constructor();
@@ -44,4 +49,5 @@ export declare class rList_definition {
     inserter_icon: boolean;
     onOpen: Function | undefined;
     properties: rList_property[];
+    tags: rList_property_tags | null;
 }

package/components/list/List.js

@@ -17,6 +17,11 @@ export class rList_property {
     a = '';
     onSelect = undefined;
     position = undefined;
+    readOnly = false;
+    detailed = false;
+    prefix = '';
+    postfix = '';
+    getter = undefined;
 }
 export class rList_property_combo extends rList_property {
     constructor() {
@@ -52,4 +57,5 @@ export class rList_definition {
     inserter_icon = false;
     onOpen = undefined;
     properties = [];
+    tags = null;
 }

package/components/list/internal/list.element.props.svelte

@@ -70,10 +70,11 @@ async function edit_date(field, prop_idx) {
 
 <div class="text-base grid-{definition.properties.length}">
     {#each definition.properties as prop, prop_index}
-        <p class="col-span-1 w-full mr-auto mt-0.5">
-            {#if item[prop.a] || placeholder == prop.name}
-                <span role="gridcell" tabindex="0">
+        <div class="col-span-1 w-full mr-auto mt-0.5">
+            {#if item[prop.a] || placeholder == prop.name || prop.getter}
+                <div role="gridcell" tabindex="0">
                     {#if prop.type == rList_property_type.Date}
+                        {@const pickerType = prop.detailed ? 'datetime-local' : 'date'}
                         <DatePicker self={item} 
                                     a={prop.a}
                                     compact={true}
@@ -82,6 +83,8 @@ async function edit_date(field, prop_idx) {
                                     inContext="props sel"
                                     bind:this={props[prop_index]}
                                     changed={(value)=>{on_date_changed(value, prop.a)}}
+                                    readOnly={prop.readOnly}
+                                    type={pickerType}
                         />
                     {:else if prop.type == rList_property_type.Combo}
                         <Combo  self={item} 
@@ -95,15 +98,27 @@ async function edit_date(field, prop_idx) {
                                 bind:this={props[prop_index]}
                                 definition={prop.combo_definition}
                                 changed={(key,name)=>{on_combo_changed(key, name, prop)}}
+                                readOnly={prop.readOnly}
                                 s="sm"/>
                     {:else if prop.type == rList_property_type.Static}
-                        <span class="dark:text-white text-stone-400 truncate  bg-stone-900/10 dark:bg-stone-100/10 rounded-lg">
-                            {item[prop.a]}
-                        </span>
+                        {@const value = prop.getter ? prop.getter(item) : item[prop.a]}
+                        <p class="truncate text-sm">
+                            {#if prop.prefix}
+                                <span>{prop.prefix}</span>
+                            {/if}
+
+                            {value}
+
+                            {#if prop.postfix}
+                                <span>{prop.postfix}</span>
+                            {/if}
+
+                        </p>
                     {/if}
-                </span>
+
+                    </div>
             {/if}
-        </p>
+            </div>
     {/each}
 </div>
 

package/components/list/internal/list.element.svelte

@@ -17,7 +17,7 @@ import { isDeviceSmallerThan } from "../../../utils";
 import { rList_definition, rList_property_type } from "../List";
 import { push } from "svelte-spa-router";
 import { FaExternalLinkAlt } from "svelte-icons/fa/";
-import { readonly } from "svelte/store";
+import Tags from "../../tags.svelte";
 export let item;
 export let title = "";
 export let summary = "";
@@ -74,7 +74,6 @@ function calculate_active(...args) {
   const activeKey = getItemKey(activeItem);
   const itemKey = getItemKey(item);
   if (activeKey == itemKey) {
-    console.log("active: ", itemKey);
     return true;
   } else
     return false;
@@ -253,11 +252,10 @@ export function scrollToView() {
 {#if item}
 {@const element_title = item[title]}
 
-<section    class="my-1 flex flex-row w-full  text-stone-700 dark:text-stone-300 cursor-default rounded-md border border-transparent {selected_class} {focused_class} scroll-mt-[50px] sm:scroll-mt-[40px]"
-            on:contextmenu={on_contextmenu}
+<section    class="my-1 flex flex-row w-full  text-stone-900 dark:text-stone-300 cursor-default rounded-md border border-transparent {selected_class} {focused_class} scroll-mt-[50px] sm:scroll-mt-[40px]"
             role="menu"
             tabindex="-1"
-            bind:this={rootElement}>
+            bind:this={rootElement}> <!--  on:contextmenu={on_contextmenu} -->
 
     <slot name="left" element={item}/>
     
@@ -334,7 +332,7 @@ export function scrollToView() {
                 {#if is_row_active}
                     <p  id={element_id} 
                         class=" text-sm                              
-                                text-stone-400"
+                                text-stone-600 dark:text-stone-400"
                             use:editable={{
                                 action: (text) => {change_summary(text)},
                                 readonly: definition.summary_readonly,
@@ -346,7 +344,7 @@ export function scrollToView() {
                 {:else}
                     <p  id={element_id} 
                         class=" text-sm 
-                                    text-stone-400"
+                                    text-stone-600 dark:text-stone-400"
                         on:click={(e) => on_active_row_clicked(e, 'bottom')}>
                         {item[summary]}
                     </p>
@@ -355,7 +353,21 @@ export function scrollToView() {
                 
         {/if}
 
-        
+        {#if definition.tags}
+                <Tags
+                    class="mt-1 mb-1"
+                    compact
+                    inContext="props"
+                    self={item}
+                    a={definition.tags.a}
+                    getGlobalTags={definition.tags.getAllTags}
+                    s="sm"
+                    onSelect={definition.tags.onSelect}
+                    onUpdateAllTags={definition.tags.onUpdateAllTags}
+                    canChangeColor={definition.tags.canChangeColor}
+                    readOnly={definition.tags.readOnly}
+                />
+            {/if}
 
     </div>
 </section>

package/components/list/list.combo.svelte

@@ -6,6 +6,9 @@ export let a = "";
 export let onSelect = void 0;
 export let association = false;
 export let hasNone = association;
+export let editable = true;
+export let prefix = "";
+export let postfix = "";
 let definition = getContext("rList-definition");
 let combo_property = new rList_property_combo();
 combo_property.name = name;
@@ -15,6 +18,9 @@ if (!combo_property.a)
 combo_property.onSelect = onSelect;
 combo_property.association = association;
 combo_property.hasNone = hasNone;
+combo_property.readOnly = !editable;
+combo_property.prefix = prefix;
+combo_property.postfix = postfix;
 definition.properties.push(combo_property);
 setContext("rCombo-definition", combo_property.combo_definition);
 </script>

package/components/list/list.combo.svelte.d.ts

@@ -6,6 +6,9 @@ declare const __propDef: {
         onSelect?: undefined;
         association?: boolean | undefined;
         hasNone?: boolean | undefined;
+        editable?: boolean | undefined;
+        prefix?: string | undefined;
+        postfix?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/list/list.date.svelte

@@ -3,6 +3,10 @@ import { rList_property_type, rList_property } from "./List";
 export let name;
 export let a = "";
 export let onSelect = void 0;
+export let editable = true;
+export let detailed = false;
+export let prefix = "";
+export let postfix = "";
 let definition = getContext("rList-definition");
 let date_property = new rList_property(rList_property_type.Date);
 date_property.name = name;
@@ -10,5 +14,9 @@ date_property.a = a;
 if (!date_property.a)
   date_property.a = date_property.name;
 date_property.onSelect = onSelect;
+date_property.readOnly = !editable;
+date_property.detailed = detailed;
+date_property.prefix = prefix;
+date_property.postfix = postfix;
 definition.properties.push(date_property);
 </script>

package/components/list/list.date.svelte.d.ts

@@ -4,6 +4,10 @@ declare const __propDef: {
         name: string;
         a?: string | undefined;
         onSelect?: undefined;
+        editable?: boolean | undefined;
+        detailed?: boolean | undefined;
+        prefix?: string | undefined;
+        postfix?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/list/list.static.svelte

@@ -2,11 +2,17 @@
 import { rList_property_type, rList_property } from "./List";
 export let name;
 export let a = "";
+export let prefix = "";
+export let postfix = "";
+export let getter = void 0;
 let definition = getContext("rList-definition");
 let date_property = new rList_property(rList_property_type.Static);
 date_property.name = name;
 date_property.a = a;
 if (!date_property.a)
   date_property.a = date_property.name;
+date_property.prefix = prefix;
+date_property.postfix = postfix;
+date_property.getter = getter;
 definition.properties.push(date_property);
 </script>

package/components/list/list.static.svelte.d.ts

@@ -3,6 +3,9 @@ declare const __propDef: {
     props: {
         name: string;
         a?: string | undefined;
+        prefix?: string | undefined;
+        postfix?: string | undefined;
+        getter?: Function | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/list/list.tags.svelte

@@ -0,0 +1,32 @@
+<script>import { getContext } from "svelte";
+import { rList_property_tags } from "./List";
+export let name = "";
+export let a = "";
+export let prefix = "";
+export let postfix = "";
+export let readOnly = false;
+export let getAllTags = void 0;
+export let onUpdateAllTags = void 0;
+export let onSelect = void 0;
+export let canChangeColor = false;
+let definition = getContext("rList-definition");
+let tags = new rList_property_tags();
+tags.prefix = prefix;
+tags.postfix = postfix;
+if (!a && name) {
+  tags.a = name;
+  tags.name = name;
+} else if (!name && a) {
+  tags.a = a;
+  tags.name = a;
+} else {
+  tags.a = a;
+  tags.name = name;
+}
+tags.onSelect = onSelect;
+tags.onUpdateAllTags = onUpdateAllTags;
+tags.canChangeColor = canChangeColor;
+tags.getAllTags = getAllTags;
+tags.readOnly = readOnly;
+definition.tags = tags;
+</script>

package/components/list/list.tags.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        name?: string | undefined;
+        a?: string | undefined;
+        prefix?: string | undefined;
+        postfix?: string | undefined;
+        readOnly?: boolean | undefined;
+        getAllTags?: Function | undefined;
+        onUpdateAllTags?: Function | undefined;
+        onSelect?: Function | undefined;
+        canChangeColor?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ListProps = typeof __propDef.props;
+export type ListEvents = typeof __propDef.events;
+export type ListSlots = typeof __propDef.slots;
+export default class List extends SvelteComponentTyped<ListProps, ListEvents, ListSlots> {
+}
+export {};

package/components/menu.js

@@ -7,6 +7,8 @@ export function showMenu(around, operations) {
     let menu_element = document.getElementById("__hd_svelte_contextmenu");
     if (!menu_element) {
         let app_div = document.getElementById("__hd_svelte_layout_root");
+        if (!app_div)
+            app_div = document.getElementById("app");
         menu_comopnent = new Menu({
             target: app_div,
             props: {}
@@ -32,6 +34,8 @@ export function showFloatingToolbar(around, toolbar, props = {}) {
     let floating_container = document.getElementById("__hd_svelte_floating_container");
     if (!floating_container) {
         let app_div = document.getElementById("__hd_svelte_layout_root");
+        if (!app_div)
+            app_div = document.getElementById("app");
         toolbar_component = new Floating_container({
             target: app_div,
             props: {}

package/components/sidebar/sidebar.item.svelte

@@ -1,7 +1,7 @@
 <script>import { getContext, tick } from "svelte";
 import Icon from "../icon.svelte";
 import { contextItemsStore, auto_hide_sidebar, contextToolbarOperations } from "../../stores";
-import { FaBars, FaEllipsisH } from "svelte-icons/fa";
+import { FaBars, FaEllipsisV } from "svelte-icons/fa";
 import { link, push } from "svelte-spa-router";
 import {
   selectable as _selectable,
@@ -119,17 +119,22 @@ function on_link_clicked(e) {
   e.preventDefault();
   if (isOnPage) {
     if (isRowActive) {
-      if (href2) {
-        push(href2);
-      }
+      redirect_to(href2);
     }
   } else {
     auto_hide_sidebar();
-    if (href2) {
-      push(href2);
-    }
+    redirect_to(href2);
   }
 }
+function redirect_to(href2) {
+  if (!href2)
+    return;
+  let absolute_pattern = /^https?:\/\//i;
+  if (!absolute_pattern.test(href2))
+    push(href2);
+  else
+    window.location.href = href2;
+}
 function on_contextmenu(e) {
   if (!operations)
     return;
@@ -179,9 +184,9 @@ function activateRow(e) {
           caption: "View",
           operations: [
             {
-              icon: FaEllipsisH,
+              icon: FaEllipsisV,
               menu: operationsList,
-              fab: "M10"
+              fab: "M00"
             }
           ]
         }
@@ -200,7 +205,6 @@ function activateRow(e) {
     <div
         on:click
         on:click={activateRow}
-        on:contextmenu={on_contextmenu}
         on:keydown
         on:keyup
         class="     mb-2
@@ -210,7 +214,7 @@ function activateRow(e) {
         class:sm:dark:hover:bg-stone-700={!!href}
         class:bg-stone-200={isRowActive}
         class:dark:bg-stone-700={isRowActive}
-        class:selected={selected(selectable, context_data)}>
+        class:selected={selected(selectable, context_data)}>  <!-- on:contextmenu={on_contextmenu} -->
             <div class="flex flex-row justify-between
                         text-base font-semibold">
                 {#if href}

package/components/tags.svelte

@@ -3,7 +3,7 @@ import Tag from "./tag.svelte";
 import FaPlus from "svelte-icons/fa/FaPlus.svelte";
 import Combo from "./combo/combo.svelte";
 import ComboItem from "./combo/combo.item.svelte";
-import { contextItemsStore, data_tick_store, contextTypesStore } from "../stores.js";
+import { contextItemsStore, data_tick_store, contextTypesStore, tagsReloader } from "../stores.js";
 import { informModification, pushChanges } from "../updates.js";
 export let tags = "";
 export let getGlobalTags;
@@ -17,6 +17,8 @@ export let canChangeColor = false;
 export let compact = true;
 export let inContext = "";
 export let pushChangesImmediately = true;
+export let allowNewTags = true;
+export let readOnly = false;
 export let changed = void 0;
 export let s = "sm";
 let userClass = $$props.class ?? "";
@@ -24,9 +26,9 @@ let item = null;
 let ctx = context ? context : getContext("ctx");
 let tagsTable = [];
 let globalTagsTable = [];
-let isEditable = true;
+let isEditable = !readOnly;
 $:
-  setup($data_tick_store, $contextItemsStore);
+  setup($data_tick_store, $contextItemsStore, $tagsReloader);
 function setup(...args) {
   const globalTags = getGlobalTags();
   globalTagsTable = decomposeTags(globalTags);
@@ -51,17 +53,17 @@ function setup(...args) {
   if (compact) {
     isEditable = false;
     if (!inContext)
-      isEditable = true;
+      isEditable = !readOnly;
     else {
       let contexts = inContext.split(" ");
       contexts.forEach((ctx2) => {
         const selectedItem = $contextItemsStore[ctx2];
         if (selectedItem && selectedItem.Id == item.Id)
-          isEditable = true;
+          isEditable = !readOnly;
       });
     }
   } else
-    isEditable = true;
+    isEditable = !readOnly;
 }
 let addComboVisible = false;
 let addCombo;
@@ -113,6 +115,12 @@ function onNewTagCreated(key, name) {
   applyChange();
   onUpdateAllTags(globalTags);
 }
+function getCreateTagCallback() {
+  if (allowNewTags)
+    return onNewTagCreated;
+  else
+    return void 0;
+}
 function onColorizeTag(name, color) {
   let globalTags = getGlobalTags();
   globalTagsTable = decomposeTags(globalTags);
@@ -218,7 +226,7 @@ switch (s) {
             <Combo  compact={true} 
                     inContext='data'
                     onSelect={onSelectTag}
-                    onNewItemCreated={onNewTagCreated}
+                    onNewItemCreated={getCreateTagCallback()}
                     s={s}
                     filtered
                     bind:this={addCombo}>