@humandialog/forms.svelte 1.3.11 → 1.3.13

package/components/tags.svelte

@@ -193,16 +193,18 @@ switch (s) {
 }
 </script>
 
-<div class="{userClass} flex flex-row {gap} flex-wrap mr-1 sm:mr-0">
-    {#each tagsTable as tag}
-        {#if isEditable}
-            <Tag name={tag.label} color={tag.color} {s}
-                 onRemove={(e) => {onRemoveTag(tag.label)}}
-                 onColor={canChangeColor ? onColorizeTag : null}/>
-        {:else}
-            <Tag name={tag.label} color={tag.color} {s}/>
-        {/if}
-    {/each}
+<section class="{userClass} flex flex-row {gap} flex-wrap mr-1 sm:mr-0">
+    <p class="flex flex-row {gap} flex-wrap ">
+        {#each tagsTable as tag}
+            {#if isEditable}
+                <Tag name={tag.label} color={tag.color} {s}
+                    onRemove={(e) => {onRemoveTag(tag.label)}}
+                    onColor={canChangeColor ? onColorizeTag : null}/>
+            {:else}
+                <Tag name={tag.label} color={tag.color} {s}/>
+            {/if}
+        {/each}
+    </p>
 
     {#if isEditable}
         {#if !addComboVisible}
@@ -227,4 +229,4 @@ switch (s) {
             </Combo>
         {/if}
     {/if}
-</div>
+</section>

package/components/tags.svelte.d.ts

@@ -1,32 +1,32 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        tags?: string | undefined;
-        getGlobalTags: Function;
-        self?: null | undefined;
-        a?: string | undefined;
-        context?: string | undefined;
-        typename?: string | undefined;
-        onSelect?: any | undefined;
-        onUpdateAllTags?: any | undefined;
-        canChangeColor?: boolean | undefined;
-        compact?: boolean | undefined;
-        inContext?: string | undefined;
-        pushChangesImmediately?: boolean | undefined;
-        changed?: undefined;
-        s?: string | undefined;
-        show?: ((event: any, hideCallback: any) => Promise<void>) | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type TagsProps = typeof __propDef.props;
-export type TagsEvents = typeof __propDef.events;
-export type TagsSlots = typeof __propDef.slots;
-export default class Tags extends SvelteComponentTyped<TagsProps, TagsEvents, TagsSlots> {
-    get show(): (event: any, hideCallback: any) => Promise<void>;
-}
-export {};
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        tags?: string | undefined;
+        getGlobalTags: Function;
+        self?: null | undefined;
+        a?: string | undefined;
+        context?: string | undefined;
+        typename?: string | undefined;
+        onSelect?: any | undefined;
+        onUpdateAllTags?: any | undefined;
+        canChangeColor?: boolean | undefined;
+        compact?: boolean | undefined;
+        inContext?: string | undefined;
+        pushChangesImmediately?: boolean | undefined;
+        changed?: undefined;
+        s?: string | undefined;
+        show?: ((event: any, hideCallback: any) => Promise<void>) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TagsProps = typeof __propDef.props;
+export type TagsEvents = typeof __propDef.events;
+export type TagsSlots = typeof __propDef.slots;
+export default class Tags extends SvelteComponentTyped<TagsProps, TagsEvents, TagsSlots> {
+    get show(): (event: any, hideCallback: any) => Promise<void>;
+}
+export {};

package/components/textarea.ltop.svelte.d.ts

@@ -1,35 +1,35 @@
-/** @typedef {typeof __propDef.props}  TextareaProps */
-/** @typedef {typeof __propDef.events}  TextareaEvents */
-/** @typedef {typeof __propDef.slots}  TextareaSlots */
-export default class Textarea extends SvelteComponentTyped<{
-    label?: string | undefined;
-    s?: string | undefined;
-    placeholder?: string | undefined;
-    c?: string | undefined;
-    val?: string | undefined;
-    sy?: string | undefined;
-    r?: number | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type TextareaProps = typeof __propDef.props;
-export type TextareaEvents = typeof __propDef.events;
-export type TextareaSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        label?: string | undefined;
-        s?: string | undefined;
-        placeholder?: string | undefined;
-        c?: string | undefined;
-        val?: string | undefined;
-        sy?: string | undefined;
-        r?: number | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};
+/** @typedef {typeof __propDef.props}  TextareaProps */
+/** @typedef {typeof __propDef.events}  TextareaEvents */
+/** @typedef {typeof __propDef.slots}  TextareaSlots */
+export default class Textarea extends SvelteComponentTyped<{
+    label?: string | undefined;
+    s?: string | undefined;
+    placeholder?: string | undefined;
+    c?: string | undefined;
+    val?: string | undefined;
+    sy?: string | undefined;
+    r?: number | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type TextareaProps = typeof __propDef.props;
+export type TextareaEvents = typeof __propDef.events;
+export type TextareaSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        label?: string | undefined;
+        s?: string | undefined;
+        placeholder?: string | undefined;
+        c?: string | undefined;
+        val?: string | undefined;
+        sy?: string | undefined;
+        r?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/tile.title.svelte.d.ts

@@ -1,29 +1,29 @@
-/** @typedef {typeof __propDef.props}  TileProps */
-/** @typedef {typeof __propDef.events}  TileEvents */
-/** @typedef {typeof __propDef.slots}  TileSlots */
-export default class Tile extends SvelteComponentTyped<{
-    [x: string]: any;
-    a?: string | undefined;
-    label?: string | undefined;
-    c?: string | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type TileProps = typeof __propDef.props;
-export type TileEvents = typeof __propDef.events;
-export type TileSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        a?: string | undefined;
-        label?: string | undefined;
-        c?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};
+/** @typedef {typeof __propDef.props}  TileProps */
+/** @typedef {typeof __propDef.events}  TileEvents */
+/** @typedef {typeof __propDef.slots}  TileSlots */
+export default class Tile extends SvelteComponentTyped<{
+    [x: string]: any;
+    a?: string | undefined;
+    label?: string | undefined;
+    c?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type TileProps = typeof __propDef.props;
+export type TileEvents = typeof __propDef.events;
+export type TileSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        a?: string | undefined;
+        label?: string | undefined;
+        c?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/console.svelte.d.ts

@@ -1,23 +1,23 @@
-/** @typedef {typeof __propDef.props}  ConsoleProps */
-/** @typedef {typeof __propDef.events}  ConsoleEvents */
-/** @typedef {typeof __propDef.slots}  ConsoleSlots */
-export default class Console extends SvelteComponentTyped<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type ConsoleProps = typeof __propDef.props;
-export type ConsoleEvents = typeof __propDef.events;
-export type ConsoleSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};
+/** @typedef {typeof __propDef.props}  ConsoleProps */
+/** @typedef {typeof __propDef.events}  ConsoleEvents */
+/** @typedef {typeof __propDef.slots}  ConsoleSlots */
+export default class Console extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type ConsoleProps = typeof __propDef.props;
+export type ConsoleEvents = typeof __propDef.events;
+export type ConsoleSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/desk.svelte

@@ -95,7 +95,7 @@
             lg_content_area_horizontal_dim = ""
         }
           
-        console.log('main_side_panel_visibility', main_side_panel_visibility)
+        //console.log('main_side_panel_visibility', main_side_panel_visibility)
     }
     
     let tools_visibility = "hidden"
@@ -103,15 +103,22 @@
     let bottom_bar_visibility = "hidden"
     let bottom_bar_visible = false
     let lg_main_sidebar_height = ""
-    let fab_base_visibility = "hidden"
-    let fab_visibility = fab_base_visibility;
-    let fab_bottom = "bottom-0"
+    //let fab_base_visibility = "hidden"
+    //let fab_visibility = fab_base_visibility;
+    //let fab_bottom = "bottom-0"
     let vertical_toolbar_visibility = "hidden sm:block"
     let content_left = "left-0 sm:left-[40px]";
     let content_width = "w-screen  sm:w-[calc(100vw-40px)] ";
                                 
     let content_top = ""
-    let content_height = ""                                
+    let content_height = ""              
+    
+    const FAB_HIDDEN = 0
+    const FAB_VISIBLE_ON_MOBILE = 1
+    const FAB_VISIBLE_ALWAYS = 2
+    let fab_visibility_mode = FAB_HIDDEN
+    let is_fab_visible = false;
+    
     
     $: { tools_visible = $tools_visible_store
         bottom_bar_visible = $bottom_bar_visible_store
@@ -123,7 +130,8 @@
         if(tools_visible)
         {
             tools_visibility = "hidden sm:block sm:fixed"
-            fab_base_visibility = "fixed sm:hidden"
+            //fab_base_visibility = "fixed sm:hidden"
+            fab_visibility_mode = FAB_VISIBLE_ON_MOBILE
 
             content_top = 'top-[50px] sm:top-[40px]'
             
@@ -136,6 +144,9 @@
         else
         {
             tools_visibility = "hidden"
+            //fab_base_visibility = "hidden"
+            fab_visibility_mode = FAB_HIDDEN
+
             content_top = `top-[50px] sm:top-0`
             if(bottom_bar_visible)
                 content_height = `min-h-[calc(100vh-290px)] sm:h-[calc(100vh-240px)]`           
@@ -149,16 +160,18 @@
         {
             lg_main_sidebar_height = `lg:h-[calc(100vh-240px)]`    
             bottom_bar_visibility = "fixed"
-            fab_bottom = `bottom-[240px]`;
+         //   fab_bottom = `bottom-[240px]`;
         }
         else
         {    
             lg_main_sidebar_height = ""
             bottom_bar_visibility = "hidden"
-            fab_bottom = "bottom-0"
+         //   fab_bottom = "bottom-0"
         }
         
-        fab_visibility = fab_base_visibility;
+        
+        //fab_visibility = fab_base_visibility;
+        determineFABVisibility();
     }
 
 
@@ -250,44 +263,62 @@
         const vp = window.visualViewport;
         setViewportHeight(vp)
 
-        determineFABVisibility();
+        determineFABVisibilityAsync();
     }
 
     function onSelectionChanged(e)
     {
-        determineFABVisibility();
+        console.log('onSelectionChanged')
+        determineFABVisibilityAsync();
     }
 
     function onFocusOut(e)
     {
-        determineFABVisibility();
+        determineFABVisibilityAsync();
     }
 
     let change_ticket = 0
     let last_change_ticket = 0
-    function determineFABVisibility()
+    function determineFABVisibilityAsync()
     {
         change_ticket++;
         setTimeout( () => {
             if(change_ticket != last_change_ticket)
             {
                 last_change_ticket = change_ticket;
-                let new_fab_visibility = "";
+                determineFABVisibility();
+            }
+        }, 200)
+        
+    }
 
+    function determineFABVisibility()
+    {
+        switch(fab_visibility_mode)
+        {
+        case FAB_HIDDEN:
+            is_fab_visible = false;
+            break;
+
+        case FAB_VISIBLE_ON_MOBILE:
+            if(isDeviceSmallerThan("sm"))
+            {
                 if(isOnScreenKeyboardVisible())
-                {
-                    new_fab_visibility = 'hidden'
-                }
+                    is_fab_visible = false;
                 else
-                {
-                    new_fab_visibility = fab_base_visibility;
-                }
-
-                if(fab_visibility != new_fab_visibility)
-                    fab_visibility = new_fab_visibility;
+                    is_fab_visible = true;
             }
-        }, 200)
-        
+            else
+                is_fab_visible = false;
+            break;
+
+        case FAB_VISIBLE_ALWAYS:
+            if(isOnScreenKeyboardVisible())
+                is_fab_visible = false;
+            else
+                is_fab_visible = true;
+            break;
+        }
     }
 
     let operationsComponent
@@ -379,9 +410,11 @@
                         <Operations bind:this={operationsComponent} />
                     </div>
 
-                    <div class="{fab_visibility} right-3 {fab_bottom} mb-1 cursor-pointer z-10">
+                    {#if is_fab_visible}
+                    <!--div class="{fab_visibility} left-3 {fab_bottom} mb-1 cursor-pointer z-10"-->
                         <Fab bind:this={fabComponent}/>
-                    </div>
+                    <!---/div-->
+                    {/if}
 
                     <!--#######################################################-->
                     <!--##  CONTENT                          ##################-->

package/desk.svelte.d.ts

@@ -1,23 +1,23 @@
-/** @typedef {typeof __propDef.props}  DeskProps */
-/** @typedef {typeof __propDef.events}  DeskEvents */
-/** @typedef {typeof __propDef.slots}  DeskSlots */
-export default class Desk extends SvelteComponentTyped<{
-    layout: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type DeskProps = typeof __propDef.props;
-export type DeskEvents = typeof __propDef.events;
-export type DeskSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        layout: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};
+/** @typedef {typeof __propDef.props}  DeskProps */
+/** @typedef {typeof __propDef.events}  DeskEvents */
+/** @typedef {typeof __propDef.slots}  DeskSlots */
+export default class Desk extends SvelteComponentTyped<{
+    layout: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type DeskProps = typeof __propDef.props;
+export type DeskEvents = typeof __propDef.events;
+export type DeskSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        layout: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/form.box.svelte.d.ts

@@ -1,35 +1,35 @@
-/** @typedef {typeof __propDef.props}  FormProps */
-/** @typedef {typeof __propDef.events}  FormEvents */
-/** @typedef {typeof __propDef.slots}  FormSlots */
-export default class Form extends SvelteComponentTyped<{
-    self?: null | undefined;
-    context?: string | undefined;
-    c?: string | undefined;
-    cl?: string | undefined;
-    fit?: boolean | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type FormProps = typeof __propDef.props;
-export type FormEvents = typeof __propDef.events;
-export type FormSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        self?: null | undefined;
-        context?: string | undefined;
-        c?: string | undefined;
-        cl?: string | undefined;
-        fit?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export {};
+/** @typedef {typeof __propDef.props}  FormProps */
+/** @typedef {typeof __propDef.events}  FormEvents */
+/** @typedef {typeof __propDef.slots}  FormSlots */
+export default class Form extends SvelteComponentTyped<{
+    self?: null | undefined;
+    context?: string | undefined;
+    c?: string | undefined;
+    cl?: string | undefined;
+    fit?: boolean | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type FormProps = typeof __propDef.props;
+export type FormEvents = typeof __propDef.events;
+export type FormSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        self?: null | undefined;
+        context?: string | undefined;
+        c?: string | undefined;
+        cl?: string | undefined;
+        fit?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/horizontal.toolbar.svelte

@@ -284,7 +284,7 @@
 <div class="no-print flex flex-row w-full" on:click={clearSelection}>
     <div class="flex-none left-0 flex h-12 sm:h-10">
         <button class="w-12 sm:w-10 h-full flex justify-center items-center text-stone-300 hover:text-stone-100" on:click|stopPropagation={toggle_navigator}>
-            <Icon class="w-8 sm:w-6 h-8 sm:h-6" component={icon}/>
+            <Icon class="w-5 h-5" component={icon}/>
         </button>
     </div>
 
@@ -297,7 +297,7 @@
         {#if user_is_in_multiple_groups}
             <button class="h-full w-12 sm:w-10 px-0 flex justify-center items-center   text-stone-300 hover:text-stone-100"
                     on:click|stopPropagation={show_groups}>
-                <Icon class="w-5 sm:w-4 h-5 sm:h-4" component={FaUsers} />
+                <Icon class="w-5  h-5 " component={FaUsers} />
             </button>
         {/if}
 
@@ -305,7 +305,7 @@
             class="h-full w-12 sm:w-10 px-0 flex justify-center items-center   text-stone-300 hover:text-stone-100"
             on:click|stopPropagation={show_options}>
 
-            <Icon class="w-5 sm:w-4 h-5 sm:h-4" component={FaCog} />
+            <Icon class="w-5  h-5 " component={FaCog} />
         </button>
     </div>
 

package/horizontal.toolbar.svelte.d.ts

@@ -1,25 +1,25 @@
-/** @typedef {typeof __propDef.props}  HorizontalProps */
-/** @typedef {typeof __propDef.events}  HorizontalEvents */
-/** @typedef {typeof __propDef.slots}  HorizontalSlots */
-export default class Horizontal extends SvelteComponentTyped<{
-    appConfig: any;
-    clearsContext?: string | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type HorizontalProps = typeof __propDef.props;
-export type HorizontalEvents = typeof __propDef.events;
-export type HorizontalSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        appConfig: any;
-        clearsContext?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};
+/** @typedef {typeof __propDef.props}  HorizontalProps */
+/** @typedef {typeof __propDef.events}  HorizontalEvents */
+/** @typedef {typeof __propDef.slots}  HorizontalSlots */
+export default class Horizontal extends SvelteComponentTyped<{
+    appConfig: any;
+    clearsContext?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type HorizontalProps = typeof __propDef.props;
+export type HorizontalEvents = typeof __propDef.events;
+export type HorizontalSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        appConfig: any;
+        clearsContext?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};