@likable-hair/svelte 3.3.14 → 4.0.0

package/dist/components/composed/buttons/ActivableButton.svelte

@@ -1,10 +1,15 @@
-<script>import Button from "../../simple/buttons/Button.svelte";
-export let active = false, buttonProps = {};
+<script lang="ts">import Button from "../../simple/buttons/Button.svelte";
+let { active = $bindable(false), buttonProps = {}, onclick, children, appendSnippet: appendInternalSnippet, } = $props();
+function handleOnClick(e) {
+    active = !active;
+    if (onclick) {
+        onclick(e);
+    }
+}
 </script>
 
 <Button
-  on:click={() => active = !active}
-  on:click
+  onclick={handleOnClick}
   {...buttonProps}
   buttonType="text"
   --button-default-text-background-color={active ? 
@@ -42,8 +47,8 @@ export let active = false, buttonProps = {};
   --button-default-disabled-background-color="none"
   --button-default-disabled-color="rgb(var(--global-color-contrast-900), .5)"
 >
-  <slot />
-  <svelte:fragment slot="append">
-    <slot name="append" />
-  </svelte:fragment>
+  {@render children?.()}
+  {#snippet appendSnippet()}
+    {@render appendInternalSnippet?.()}
+  {/snippet}
 </Button>

package/dist/components/composed/buttons/ActivableButton.svelte.d.ts

@@ -1,34 +1,12 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        active?: boolean | undefined;
-        buttonProps?: {
-            [x: string]: any;
-            class?: string | undefined;
-            buttonType?: "default" | "text" | "icon" | undefined;
-            type?: "submit" | "button" | undefined;
-            loading?: boolean | undefined;
-            icon?: string | undefined;
-            tabindex?: number | null | undefined;
-            disabled?: boolean | undefined;
-            buttonElement?: HTMLElement | undefined;
-        } | undefined;
-    };
-    events: {
-        click: CustomEvent<{
-            nativeEvent: MouseEvent;
-        }>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-        append: {};
-    };
-};
-export type ActivableButtonProps = typeof __propDef.props;
-export type ActivableButtonEvents = typeof __propDef.events;
-export type ActivableButtonSlots = typeof __propDef.slots;
-export default class ActivableButton extends SvelteComponent<ActivableButtonProps, ActivableButtonEvents, ActivableButtonSlots> {
+import Button from "../../simple/buttons/Button.svelte";
+import type { ComponentProps, Snippet } from "svelte";
+interface Props {
+    active?: boolean;
+    buttonProps?: ComponentProps<typeof Button>;
+    onclick?: ComponentProps<typeof Button>['onclick'];
+    children?: Snippet<[]>;
+    appendSnippet?: Snippet<[]>;
 }
-export {};
+declare const ActivableButton: import("svelte").Component<Props, {}, "active">;
+type ActivableButton = ReturnType<typeof ActivableButton>;
+export default ActivableButton;

package/dist/components/composed/common/MenuOrDrawer.svelte

@@ -1,38 +1,40 @@
-<script>import "../../../css/main.css";
-import Drawer from "../../simple/navigation/Drawer.svelte";
-import Menu from "../../simple/common/Menu.svelte";
-import MediaQuery from "../../simple/common/MediaQuery.svelte";
-export let open = false, activator, drawerPosition = "bottom", menuAnchor = "bottom-center", stayInViewport = true, flipOnOverflow = false, _boxShadow = "rgb(var(--global-color-grey-900), .5) 0px 2px 4px", _height = "fit-content", _width = void 0, _maxHeight = void 0, _minWidth = "100px", _borderRadius = "5px", openingId = void 0, _drawerOverflow = void 0;
+<script lang="ts">import '../../../css/main.css';
+import Drawer from '../../simple/navigation/Drawer.svelte';
+import Menu from '../../simple/common/Menu.svelte';
+import MediaQuery from '../../simple/common/MediaQuery.svelte';
+let { open = $bindable(false), activator = $bindable(), drawerPosition = $bindable('bottom'), menuAnchor = $bindable('bottom-center'), stayInViewport = $bindable(true), flipOnOverflow = $bindable(false), _boxShadow = "rgb(var(--global-color-grey-900), .5) 0px 2px 4px", _height = "fit-content", _width = undefined, _maxHeight = undefined, _minWidth = "100px", _borderRadius = "5px", openingId = $bindable(undefined), _drawerOverflow = undefined, children, onclose, onitemClick, } = $props();
 </script>
 
-<MediaQuery let:mAndDown>
-  {#if mAndDown}
-    <Drawer
-      bind:open={open}
-      bind:position={drawerPosition}
-      on:close
-      on:item-click
-      _overflow={_drawerOverflow}
-    >
-      <slot isDrawer={true} isMenu={false}></slot>
-    </Drawer>
-  {:else}
-    <Menu
-      bind:activator={activator}
-      bind:open={open}
-      closeOnClickOutside
-      _boxShadow={_boxShadow}
-      _height={_height}
-      _maxHeight={_maxHeight}
-      _minWidth={_minWidth}
-      _borderRadius={_borderRadius}
-      _width={_width || ""}
-      anchor={menuAnchor}
-      bind:stayInViewport={stayInViewport}
-      bind:flipOnOverflow={flipOnOverflow}
-      bind:openingId
-    >
-      <slot isDrawer={false} isMenu={true}></slot>
-    </Menu>
-  {/if}
+<MediaQuery>
+  {#snippet defaultSnippet({ mAndDown})}
+    {#if mAndDown}
+      <Drawer
+        bind:open={open}
+        bind:position={drawerPosition}
+        _overflow={_drawerOverflow}
+        {onclose}
+        {onitemClick}
+      >
+        {@render children?.({ isDrawer: true, isMenu: false })}
+      </Drawer>
+    {:else}
+      <Menu
+        bind:activator={activator}
+        bind:open={open}
+        closeOnClickOutside
+        _boxShadow={_boxShadow}
+        _height={_height}
+        _maxHeight={_maxHeight}
+        _minWidth={_minWidth}
+        _borderRadius={_borderRadius}
+        _width={_width || ""}
+        anchor={menuAnchor}
+        bind:stayInViewport={stayInViewport}
+        bind:flipOnOverflow={flipOnOverflow}
+        bind:openingId
+      >
+        {@render children?.({ isDrawer: false, isMenu: true })}
+      </Menu>
+    {/if}
+  {/snippet}
 </MediaQuery>

package/dist/components/composed/common/MenuOrDrawer.svelte.d.ts

@@ -1,43 +1,31 @@
-import { SvelteComponent } from "svelte";
 import '../../../css/main.css';
 import Drawer from '../../simple/navigation/Drawer.svelte';
 import Menu from '../../simple/common/Menu.svelte';
-import type { ComponentProps } from 'svelte';
-declare const __propDef: {
-    props: {
-        open?: boolean | undefined;
-        activator: HTMLElement;
-        drawerPosition?: ComponentProps<Drawer>['position'];
-        menuAnchor?: ComponentProps<Menu>['anchor'];
-        stayInViewport?: ComponentProps<Menu>['stayInViewport'];
-        flipOnOverflow?: ComponentProps<Menu>['flipOnOverflow'];
-        _boxShadow?: string | undefined;
-        _height?: string | undefined;
-        _width?: string | undefined;
-        _maxHeight?: string | undefined;
-        _minWidth?: string | undefined;
-        _borderRadius?: string | undefined;
-        openingId?: ComponentProps<Menu>['openingId'];
-        _drawerOverflow?: string | undefined;
-    };
-    events: {
-        close: CustomEvent<{}>;
-        'item-click': CustomEvent<{
-            item: import("../../simple/navigation/Navigator.svelte").Item;
-        }>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
+import type { ComponentProps, Snippet } from 'svelte';
+interface Props {
+    open?: boolean;
+    activator: HTMLElement;
+    drawerPosition?: ComponentProps<typeof Drawer>['position'];
+    menuAnchor?: ComponentProps<typeof Menu>['anchor'];
+    stayInViewport?: ComponentProps<typeof Menu>['stayInViewport'];
+    flipOnOverflow?: ComponentProps<typeof Menu>['flipOnOverflow'];
+    _boxShadow?: string;
+    _height?: string;
+    _width?: string;
+    _maxHeight?: string;
+    _minWidth?: string;
+    _borderRadius?: string;
+    openingId?: ComponentProps<typeof Menu>['openingId'];
+    _drawerOverflow?: string;
+    children?: Snippet<[
+        {
             isDrawer: boolean;
             isMenu: boolean;
-        };
-    };
-};
-export type MenuOrDrawerProps = typeof __propDef.props;
-export type MenuOrDrawerEvents = typeof __propDef.events;
-export type MenuOrDrawerSlots = typeof __propDef.slots;
-export default class MenuOrDrawer extends SvelteComponent<MenuOrDrawerProps, MenuOrDrawerEvents, MenuOrDrawerSlots> {
+        }
+    ]>;
+    onclose?: ComponentProps<typeof Drawer>['onclose'];
+    onitemClick?: ComponentProps<typeof Drawer>['onitemClick'];
 }
-export {};
+declare const MenuOrDrawer: import("svelte").Component<Props, {}, "flipOnOverflow" | "open" | "stayInViewport" | "activator" | "openingId" | "drawerPosition" | "menuAnchor">;
+type MenuOrDrawer = ReturnType<typeof MenuOrDrawer>;
+export default MenuOrDrawer;

package/dist/components/composed/common/MenuOrDrawerOptions.svelte

@@ -1,17 +1,26 @@
-<script context="module"></script>
+<script lang="ts" module>export {};
+</script>
 
-<script>import "../../../css/main.css";
+<script lang="ts">import '../../../css/main.css';
 import MenuOrDrawer from "./MenuOrDrawer.svelte";
-import SelectableVerticalList from "../../simple/lists/SelectableVerticalList.svelte";
-export let open = false, activator, drawerPosition = "bottom", menuAnchor = "bottom-center", elements = [], stayInViewport = true, flipOnOverflow = false, _boxShadow = "rgb(var(--global-color-grey-900), .5) 0px 2px 4px", _height = "fit-content", _maxHeight = void 0, _minWidth = "100px", _borderRadius = "5px", openingId = void 0;
-let selected;
-let focused;
-$:
-  if (!!selected)
-    selected = void 0;
-$:
-  if (!!focused && !open)
-    focused = void 0;
+import SelectableVerticalList from '../../simple/lists/SelectableVerticalList.svelte';
+let { open = $bindable(false), activator = $bindable(), drawerPosition = 'bottom', menuAnchor = 'bottom-center', elements = [], stayInViewport = true, flipOnOverflow = false, _boxShadow = "rgb(var(--global-color-grey-900), .5) 0px 2px 4px", _height = "fit-content", _maxHeight = undefined, _minWidth = "100px", _borderRadius = "5px", openingId = undefined, onselect, } = $props();
+let selected = $state();
+let focused = $state();
+$effect(() => {
+    if (!!selected)
+        selected = undefined;
+});
+$effect(() => {
+    if (!!focused && !open)
+        focused = undefined;
+});
+function handleOnSelect(e) {
+    open = false;
+    if (onselect) {
+        onselect(e);
+    }
+}
 </script>
 
 <MenuOrDrawer
@@ -26,22 +35,22 @@ $:
   {_maxHeight}
   {_minWidth}
   {_borderRadius}
-  let:isDrawer
   --drawer-default-space={`${Math.min(elements?.length || 0, 5) * 56}px`}
   bind:openingId
 >
-  <div class="selectable-list-wrapper">
-    <SelectableVerticalList
-      bind:selected
-      bind:focused
-      bind:elements
-      --selectable-vertical-list-default-width={isDrawer ? '100%' : 'auto'}
-      --selectable-vertical-list-default-element-height={isDrawer ? '56px' : 'auto'}
-      --selectable-vertical-list-default-title-font-size="null"
-      on:select={() => open = false}
-      on:select
-    ></SelectableVerticalList>
-  </div>
+  {#snippet children({ isDrawer, isMenu })}
+    <div class="selectable-list-wrapper">
+      <SelectableVerticalList
+        bind:selected
+        bind:focused
+        bind:elements
+        --selectable-vertical-list-default-width={isDrawer ? '100%' : 'auto'}
+        --selectable-vertical-list-default-element-height={isDrawer ? '56px' : 'auto'}
+        --selectable-vertical-list-default-title-font-size="null"
+        onselect={handleOnSelect}
+      ></SelectableVerticalList>
+    </div>
+  {/snippet}
 </MenuOrDrawer>
 
 <style>

package/dist/components/composed/common/MenuOrDrawerOptions.svelte.d.ts

@@ -1,4 +1,3 @@
-import { SvelteComponent } from "svelte";
 export type ArrayElement<ArrayType extends readonly unknown[]> = ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
 import '../../../css/main.css';
 import type { ComponentProps } from 'svelte';
@@ -6,34 +5,22 @@ import MenuOrDrawer from "./MenuOrDrawer.svelte";
 import type Drawer from '../../simple/navigation/Drawer.svelte';
 import type Menu from '../../simple/common/Menu.svelte';
 import SelectableVerticalList from '../../simple/lists/SelectableVerticalList.svelte';
-declare const __propDef: {
-    props: {
-        open?: boolean | undefined;
-        activator: HTMLElement;
-        drawerPosition?: ComponentProps<Drawer>['position'];
-        menuAnchor?: ComponentProps<Menu>['anchor'];
-        elements?: ComponentProps<SelectableVerticalList>['elements'];
-        stayInViewport?: ComponentProps<MenuOrDrawer>['stayInViewport'];
-        flipOnOverflow?: ComponentProps<MenuOrDrawer>['flipOnOverflow'];
-        _boxShadow?: string | undefined;
-        _height?: string | undefined;
-        _maxHeight?: string | undefined;
-        _minWidth?: string | undefined;
-        _borderRadius?: string | undefined;
-        openingId?: ComponentProps<MenuOrDrawer>['openingId'];
-    };
-    events: {
-        select: CustomEvent<{
-            element: import("../../simple/lists/SelectableVerticalList.svelte").Element;
-        }>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type MenuOrDrawerOptionsProps = typeof __propDef.props;
-export type MenuOrDrawerOptionsEvents = typeof __propDef.events;
-export type MenuOrDrawerOptionsSlots = typeof __propDef.slots;
-export default class MenuOrDrawerOptions extends SvelteComponent<MenuOrDrawerOptionsProps, MenuOrDrawerOptionsEvents, MenuOrDrawerOptionsSlots> {
+interface Props {
+    open?: boolean;
+    activator: HTMLElement;
+    drawerPosition?: ComponentProps<typeof Drawer>['position'];
+    menuAnchor?: ComponentProps<typeof Menu>['anchor'];
+    elements?: ComponentProps<typeof SelectableVerticalList>['elements'];
+    stayInViewport?: ComponentProps<typeof MenuOrDrawer>['stayInViewport'];
+    flipOnOverflow?: ComponentProps<typeof MenuOrDrawer>['flipOnOverflow'];
+    _boxShadow?: string;
+    _height?: string;
+    _maxHeight?: string;
+    _minWidth?: string;
+    _borderRadius?: string;
+    openingId?: ComponentProps<typeof MenuOrDrawer>['openingId'];
+    onselect?: ComponentProps<typeof SelectableVerticalList>['onselect'];
 }
-export {};
+declare const MenuOrDrawerOptions: import("svelte").Component<Props, {}, "open" | "activator">;
+type MenuOrDrawerOptions = ReturnType<typeof MenuOrDrawerOptions>;
+export default MenuOrDrawerOptions;

package/dist/components/composed/common/QuickActions.svelte

@@ -1,25 +1,31 @@
-<script context="module"></script>
+<script module lang="ts">export {};
+</script>
 
-<script>import { Button, Icon, mediaQuery, ToolTip } from "../../..";
+<script lang="ts">import { Button, Icon, mediaQuery, ToolTip } from "../../..";
 import DynamicTable from "../list/DynamicTable.svelte";
 import { fly } from "svelte/transition";
 import { cubicIn } from "svelte/easing";
 import MenuOrDrawer from "./MenuOrDrawer.svelte";
-import "./QuickActions.css";
-export let selectedItems, showSelectContainer, isSelectedAll, totalRows, slotSelectActionsContainer, disabled, loading, actionsForSelectedItems, position = "top", lang = "en";
-let actions = [], extraActions = [], moreActionsActivator, openMoreActions = false, infoActivators = {}, disabledInfoActivators = {};
-$: {
-  if (!!slotSelectActionsContainer) {
-    let numberOfSplit = $mediaQuery.xl ? 5 : $mediaQuery.l ? 4 : $mediaQuery.m ? 2 : $mediaQuery.s ? 0 : $mediaQuery.xs ? 0 : 3;
-    if (actionsForSelectedItems.length > numberOfSplit) {
-      extraActions = actionsForSelectedItems.slice(numberOfSplit);
-      actions = actionsForSelectedItems.slice(0, numberOfSplit);
-    } else {
-      actions = actionsForSelectedItems;
-      extraActions = [];
+import './QuickActions.css';
+let { selectedItems, showSelectContainer, isSelectedAll, totalRows, slotSelectActionsContainer = $bindable(), disabled, loading, actionsForSelectedItems, position = 'top', lang = 'en' } = $props();
+let actions = $state([]), extraActions = $state([]), moreActionsActivator = $state(), openMoreActions = $state(false), infoActivators = $state({}), disabledInfoActivators = $state({});
+$effect(() => {
+    if (!!slotSelectActionsContainer) {
+        let numberOfSplit = $mediaQuery.xl ? 5 :
+            $mediaQuery.l ? 4 :
+                $mediaQuery.m ? 2 :
+                    $mediaQuery.s ? 0 :
+                        $mediaQuery.xs ? 0 : 3;
+        if (actionsForSelectedItems.length > numberOfSplit) {
+            extraActions = actionsForSelectedItems.slice(numberOfSplit);
+            actions = actionsForSelectedItems.slice(0, numberOfSplit);
+        }
+        else {
+            actions = actionsForSelectedItems;
+            extraActions = [];
+        }
     }
-  }
-}
+});
 </script>
 
 {#if selectedItems && selectedItems.length > 0 && showSelectContainer}
@@ -31,7 +37,7 @@ $: {
       class="select-container"
     >
       <div>
-        <button class="select-info" on:click={() => (selectedItems = [], infoActivators = {}, disabledInfoActivators = {})}>
+        <button class="select-info" onclick={() => (selectedItems = [], infoActivators = {}, disabledInfoActivators = {})}>
           {!!isSelectedAll ? totalRows : selectedItems.length} {lang == 'en' ? 'items selected' : 'righe selezionate'}
           <Icon name="mdi-close" />
         </button>
@@ -54,7 +60,7 @@ $: {
               '
               --button-height="20px"
               disabled={action.disabled}
-              on:click={action.onClick}
+              onclick={action.onClick}
             >
               <div class="action" bind:this={disabledInfoActivators[action.label]}>
                 {#if action.icon}
@@ -114,12 +120,12 @@ $: {
                   --button-hover-color: var(--quick-actions-buttons-color, var(--quick-actions-default-buttons-color));
                   --button-focus-color: var(--quick-actions-buttons-color, var(--quick-actions-default-buttons-color));
                   --button-disabled-color: var(--quick-actions-buttons-color-disabled, var(--quick-actions-default-buttons-color-disabled));
-                  --button-box-shadow: none;
+                  --button-box-shadow: none;"
                   margin-left: 8px;
                 '
                 --button-height="20px"
                 disabled={disabled || loading}
-                on:click={(e) => {
+                onclick={(e) => {
                   openMoreActions = !openMoreActions;
                 }}
               >
@@ -145,77 +151,77 @@ $: {
       menuAnchor='bottom-center'
       openingId='more-actions'
       _drawerOverflow='hidden'
-      let:isMenu
-      let:isDrawer
     >
-      <div 
-        class:more-actions-container-menu={isMenu}
-        class:more-actions-container-drawer={isDrawer}
-        class:more-actions-container-bottom={isMenu && position == 'bottom'}
-      >
-        {#each extraActions as action}
-          <Button
-            style='
-              --button-background-color: var(--quick-actions-buttons-background-color, var(--quick-actions-default-buttons-background-color));
-              --button-active-background-color: var(--quick-actions-buttons-background-color, var(--quick-actions-default-buttons-background-color));
-              --button-focus-background-color: var(--quick-actions-buttons-background-color, var(--quick-actions-default-buttons-background-color));
-              --button-hover-background-color: var(--quick-actions-buttons-background-color-hover, var(--quick-actions-default-buttons-background-color-hover));
-              --button-disabled-background-color: var(--quick-actions-buttons-background-color-disabled, var(--quick-actions-default-buttons-background-color-disabled));
-              --button-color: var(--quick-actions-buttons-color, var(--quick-actions-default-buttons-color));
-              --button-hover-color: var(--quick-actions-buttons-color, var(--quick-actions-default-buttons-color));
-              --button-focus-color: var(--quick-actions-buttons-color, var(--quick-actions-default-buttons-color));
-              --button-disabled-color: var(--quick-actions-buttons-color-disabled, var(--quick-actions-default-buttons-color-disabled));
-              --button-box-shadow: none;
-            '
-            --button-height="35px"
-            disabled={action.disabled}
-            on:click={action.onClick}
-          >
-            <div class="action" bind:this={disabledInfoActivators[action.label]}>
-              {#if action.icon}
-                <Icon name={action.icon} --icon-size='16px'/>
-              {/if}
-              {#if !!action.info && !action.disabled}
-                <div bind:this={infoActivators[action.label]}>
-                  <Icon						
-                    name="mdi-help-circle-outline"
-                    --icon-size="16px"
-                  />
-                </div>
-                <ToolTip
-                  appearTimeout={1000}
-                  activator={infoActivators[action.label]}
-                >
-                  <div
-                    style:background-color='rgb(var(--global-color-background-300), .95)'
-                    style:border-radius="5px"
-                    style:padding="10px"
-                    style:color='rgb(var(--global-color-contrast-900))'
-                  > 
-                    {action.info}
-                  </div>
-                </ToolTip>
-              {/if}
-              {action.label}
-              {#if !!action.disabledInfo && action.disabled}
-                <ToolTip
-                  appearTimeout={1000}
-                  activator={disabledInfoActivators[action.label]}
-                >
-                  <div
-                    style:background-color='rgb(var(--global-color-background-300), .95)'
-                    style:border-radius="5px"
-                    style:padding="10px"
-                    style:color='rgb(var(--global-color-contrast-900))'
-                  > 
-                    {action.disabledInfo}
+      {#snippet children({ isDrawer, isMenu })}
+        <div 
+          class:more-actions-container-menu={isMenu}
+          class:more-actions-container-drawer={isDrawer}
+          class:more-actions-container-bottom={isMenu && position == 'bottom'}
+        >
+          {#each extraActions as action}
+            <Button
+              style='
+                --button-background-color: var(--quick-actions-buttons-background-color, var(--quick-actions-default-buttons-background-color));
+                --button-active-background-color: var(--quick-actions-buttons-background-color, var(--quick-actions-default-buttons-background-color));
+                --button-focus-background-color: var(--quick-actions-buttons-background-color, var(--quick-actions-default-buttons-background-color));
+                --button-hover-background-color: var(--quick-actions-buttons-background-color-hover, var(--quick-actions-default-buttons-background-color-hover));
+                --button-disabled-background-color: var(--quick-actions-buttons-background-color-disabled, var(--quick-actions-default-buttons-background-color-disabled));
+                --button-color: var(--quick-actions-buttons-color, var(--quick-actions-default-buttons-color));
+                --button-hover-color: var(--quick-actions-buttons-color, var(--quick-actions-default-buttons-color));
+                --button-focus-color: var(--quick-actions-buttons-color, var(--quick-actions-default-buttons-color));
+                --button-disabled-color: var(--quick-actions-buttons-color-disabled, var(--quick-actions-default-buttons-color-disabled));
+                --button-box-shadow: none;
+              '
+              --button-height="35px"
+              disabled={action.disabled}
+              onclick={action.onClick}
+            >
+              <div class="action" bind:this={disabledInfoActivators[action.label]}>
+                {#if action.icon}
+                  <Icon name={action.icon} --icon-size='16px'/>
+                {/if}
+                {#if !!action.info && !action.disabled}
+                  <div bind:this={infoActivators[action.label]}>
+                    <Icon						
+                      name="mdi-help-circle-outline"
+                      --icon-size="16px"
+                    />
                   </div>
-                </ToolTip>
-              {/if}
-            </div>
-          </Button>
-        {/each}
-      </div>
+                  <ToolTip
+                    appearTimeout={1000}
+                    activator={infoActivators[action.label]}
+                  >
+                    <div
+                      style:background-color='rgb(var(--global-color-background-300), .95)'
+                      style:border-radius="5px"
+                      style:padding="10px"
+                      style:color='rgb(var(--global-color-contrast-900))'
+                    > 
+                      {action.info}
+                    </div>
+                  </ToolTip>
+                {/if}
+                {action.label}
+                {#if !!action.disabledInfo && action.disabled}
+                  <ToolTip
+                    appearTimeout={1000}
+                    activator={disabledInfoActivators[action.label]}
+                  >
+                    <div
+                      style:background-color='rgb(var(--global-color-background-300), .95)'
+                      style:border-radius="5px"
+                      style:padding="10px"
+                      style:color='rgb(var(--global-color-contrast-900))'
+                    > 
+                      {action.disabledInfo}
+                    </div>
+                  </ToolTip>
+                {/if}
+              </div>
+            </Button>
+          {/each}
+        </div>
+      {/snippet}
     </MenuOrDrawer>
   </div>
 {/if}

package/dist/components/composed/common/QuickActions.svelte.d.ts

@@ -1,38 +1,27 @@
-import { SvelteComponent } from "svelte";
 export type Action = {
     label: string;
     icon?: string;
     disabled?: boolean;
     info?: string;
     disabledInfo?: string;
-    onClick: (e: CustomEvent<{
-        nativeEvent: MouseEvent;
-    }>) => void;
+    onClick: NonNullable<ComponentProps<typeof Button>['onclick']>;
 };
+import { Button } from "../../..";
 import type { ComponentProps } from "svelte";
 import DynamicTable from "../list/DynamicTable.svelte";
 import './QuickActions.css';
-declare const __propDef: {
-    props: {
-        selectedItems: ComponentProps<DynamicTable["selectedItems"]>[];
-        showSelectContainer: boolean;
-        isSelectedAll: boolean;
-        totalRows: number;
-        slotSelectActionsContainer: HTMLElement | undefined;
-        disabled: boolean;
-        loading: boolean;
-        actionsForSelectedItems: Action[];
-        position?: "bottom" | "top" | undefined;
-        lang?: "it" | "en" | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type QuickActionsProps = typeof __propDef.props;
-export type QuickActionsEvents = typeof __propDef.events;
-export type QuickActionsSlots = typeof __propDef.slots;
-export default class QuickActions extends SvelteComponent<QuickActionsProps, QuickActionsEvents, QuickActionsSlots> {
+interface Props {
+    selectedItems: ComponentProps<typeof DynamicTable>["selectedItems"];
+    showSelectContainer: boolean;
+    isSelectedAll: boolean;
+    totalRows: number;
+    slotSelectActionsContainer?: HTMLElement;
+    disabled: boolean;
+    loading: boolean;
+    actionsForSelectedItems: Action[];
+    position?: 'top' | 'bottom';
+    lang?: 'it' | 'en';
 }
-export {};
+declare const QuickActions: import("svelte").Component<Props, {}, "slotSelectActionsContainer">;
+type QuickActions = ReturnType<typeof QuickActions>;
+export default QuickActions;