@likable-hair/svelte 4.0.40 → 4.0.42

package/dist/components/composed/list/DynamicTable.svelte

@@ -21,6 +21,7 @@ import Switch from "../../simple/forms/Switch.svelte";
 import CircularLoader from "../../simple/loaders/CircularLoader.svelte";
 import NoData from "../../simple/common/NoData.svelte";
 import SearchBar from "../search/SearchBar.svelte";
+import MenuOrDrawer from "../common/MenuOrDrawer.svelte";
 onMount(() => {
     updateHeaderHeight();
     window.addEventListener('resize', updateHeaderHeight);
@@ -95,7 +96,7 @@ const [send, receive] = crossfade({
     },
 });
 let { headers = [], headersToShowInTable = headers, subHeaders = [], customizeHeaders = false, rows = [], sortedBy = $bindable(), sortDirection = $bindable("asc"), cellEdit = false, lang = "en", dateLocale, noItemsText = lang == 'en' ? "No items to show" : 'Nessun elemento da visualizzare', showSelect = false, showActions = true, selectMode = "single", selectedItems = $bindable([]), unselectedItems = $bindable([]), selectedAll = $bindable(false), showExpand = false, loading = false, disabled = false, filters = $bindable([]), searchBarColumns, searchBarVisible = false, searchBarPlaceholder = lang == 'en' ? "Type to search..." : "Scrivi per cercare...", filtersVisible = false, quickFiltersVisible = false, editFilterMode = "one-edit", showActiveFilters = true, quickFilters = [], actionsForSelectedItems = [], quickActionsDisabled = false, totalRows = rows.length, searchText = $bindable(), renderedRowsNumber = 100, sectionRowsNumber = 20, sectionThreshold = 2, backwardThresholdPixel = 100, forwardThresholdPixel = 100, uniqueKey = 'id', numberOfResultsVisible = false, endLineVisible = false, resizableColumns = false, resizedColumnSizeWithPadding = $bindable({}), dynamicFilters = true, useSelectedItemsOnly = false, selectedAllDisabled = false, class: clazz = {}, onapplyCustomQuickFilter, oncellClick, onfetchData, onfiltersChange, onsort, onremoveAllFilters, onremoveCustomQuickFilter, onremoveFilter, onrowClick, onsaveCellEdit, onsaveHeadersToShow, oncolumnResize, searchBarSnippet, customFilterChipSnippet, customFilterSnippet, filterAppendSnippet, onscroll, selectionSnippet: selectionInternalSnippet, itemLabelSnippet: itemLabelInternalSnippet, chipLabelSnippet, headerSnippet, headerLabelSnippet, rowAppendSnippet, customRowSnippet, subRowAppendSnippet, subHeaderLabelSnippet, subHeaderSnippet, subRowActionsSnippet, customSubRowSnippet, customQuickFilterSnippet, appendSnippet, } = $props();
-let openCellEditor = $state(false), cellEditorActivator = $state(), cellEditorContainer = $state(), menuElementCellEditor = $state(), menuElementQuickFilters = $state(), cellEditorInfoActive = $state(), saveEditDisabled = $state(false), searchBarInput = $state(undefined), openQuickFilter = $state(false), quickFilterActivator = $state(), quickFilterActive = $state(), globalBuilder = new FilterBuilder(), calendarOpened = $state(false), calendarOpened2 = $state(false), selectedIndexes = [], cellEditorIndexRow = $state(), cellEditorIndexHeader = $state(), cellEditorSubItem = $state(), currentSectionNumber = $state(0), tableBody = $state(), tableContainer = $state(), tableHTML = $state(), headersHTML = $state({}), userScrolling = $state(true), reachedBottom = $state(false), reachedTop = false, resizing = false, remainingWidth = $state(0), hideScrollbar = $state(false), sortModify, mainHeader = $state(), resizeObserver, ignoreSelectAll = rows.length == totalRows && useSelectedItemsOnly;
+let openCellEditor = $state(false), cellEditorActivator = $state(), cellEditorContainer = $state(), cellEditorInfoActive = $state(), saveEditDisabled = $state(false), searchBarInput = $state(undefined), openQuickFilter = $state(false), quickFilterActivator = $state(), quickFilterActive = $state(), globalBuilder = new FilterBuilder(), calendarOpened = $state(false), calendarOpened2 = $state(false), selectedIndexes = [], cellEditorIndexRow = $state(), cellEditorIndexHeader = $state(), cellEditorSubItem = $state(), currentSectionNumber = $state(0), tableBody = $state(), tableContainer = $state(), tableHTML = $state(), headersHTML = $state({}), userScrolling = $state(true), reachedBottom = $state(false), reachedTop = false, resizing = false, remainingWidth = $state(0), hideScrollbar = $state(false), sortModify, mainHeader = $state(), resizeObserver, ignoreSelectAll = rows.length == totalRows && useSelectedItemsOnly;
 const DEFAULT_MIN_WIDTH_PX = 100, DEFAULT_MAX_WIDTH_PX = 400;
 let totalSections = $derived((totalRows - renderedRowsNumber) / sectionRowsNumber);
 let hasMoreToRender = $derived(totalSections > currentSectionNumber);
@@ -110,12 +111,14 @@ let openHeaderDrawer = $state(false), headersToSelect = $state(!!headers
         return {
             id: h.value,
             name: h.label,
+            icon: h.icon
         };
     })
     : []), headersToShow = $state(headersToShowInTable.map((h) => {
     return {
         id: h.value,
         name: h.label,
+        icon: h.icon
     };
 })), infoActivators = $state(Array(headersToShowInTable.length));
 let totalBatchLength = $state(0), expandedRows = $state([]);
@@ -170,6 +173,7 @@ function handleCellClick(mouseEvent, item, cellEditorInfo, value, indexRow, inde
     if (disabled || loading)
         return;
     if (cellEdit && cellEditorInfo && !item.disableEdit) {
+        mouseEvent.stopPropagation();
         if (!cellEditorActivator) {
             let target = mouseEvent.target;
             cellEditorActivator = target;
@@ -1247,6 +1251,7 @@ function resizeHeader(th, header) {
                         ) != -1
                     }
                     disabled={disabled || loading}
+                    onclick={e => e.stopPropagation()}
                     onchange={(e) => handleSelect(row.item, e.detail.shiftKeyPressed)}
                   />
                 </td>
@@ -1260,7 +1265,10 @@ function resizeHeader(th, header) {
                       ? "mdi-chevron-down"
                       : "mdi-chevron-up"}
                     --icon-size="24px"
-                    onclick={() => expandRow(row)}
+                    onclick={e => {
+                      e?.stopPropagation()
+                      expandRow(row)
+                    }}
                   />
                 </td>
               {/if}
@@ -1441,345 +1449,361 @@ function resizeHeader(th, header) {
   {/if}
   </div>
 {/if}
-{#if cellEditorInfoActive}
-  <Menu
-    bind:open={openCellEditor}
-    activator={cellEditorActivator}
-    bind:menuElement={menuElementCellEditor}
-    _top={undefined}
-    openingId="cell-editor"
-  >
-    <div
-      class="cell-editor-container"
-      bind:this={cellEditorContainer}
-    >
-      <div style:grid-column="1 / 3">
-        {#if cellEditorInfoActive.type.key === "string"}
-          <LabelAndTextField
-            label={cellEditorInfoActive.title}
-            description={cellEditorInfoActive.description}
-            name={cellEditorInfoActive.title}
-            info={cellEditorInfoActive.info}
-            type="text"
-            orientation="horizontal"
-            bind:value={cellEditorInfoActive.value}
-            --simple-textfield-border-radius= 0.5rem
-            --simple-textfield-background-color= transparent
-            --simple-textfield-box-shadow= 'inset 0 0 0 1px rgb(var(--global-color-background-500))'
-            --simple-textfield-focus-box-shadow='inset 0 0 0 2px rgb(var(--global-color-primary-500))'
-          />
-        {:else if cellEditorInfoActive.type.key === "number"}
-          <LabelAndTextField
-            label={cellEditorInfoActive.title}
-            description={cellEditorInfoActive.description}
-            name={cellEditorInfoActive.title}
-            info={cellEditorInfoActive.info}
-            type="number"
-            orientation="horizontal"
-            error={saveEditDisabled}
-            bind:value={cellEditorInfoActive.value}
-            --simple-textfield-border-radius= 0.5rem
-            --simple-textfield-background-color= transparent
-            --simple-textfield-box-shadow= 'inset 0 0 0 1px rgb(var(--global-color-background-500))'
-            --simple-textfield-focus-box-shadow='inset 0 0 0 2px rgb(var(--global-color-primary-500))'
-          />
-        {:else if cellEditorInfoActive.type.key === "select"}
-          <LabelAndSelect
-            label={cellEditorInfoActive.title}
-            description={cellEditorInfoActive.description}
-            name={cellEditorInfoActive.title}
-            info={cellEditorInfoActive.info}
-            options={cellEditorInfoActive.type.params.options}
-            orientation="horizontal"
-            bind:value={cellEditorInfoActive.value}
-          />
-        {:else if cellEditorInfoActive.type.key === "boolean"}
-          <div class="container">
-            <Checkbox
-              id={cellEditorInfoActive.title}
+<MenuOrDrawer
+  bind:open={openCellEditor}
+  menuProps={{
+    activator: cellEditorActivator,
+    openingId: "cell-editor",
+  }}
+  drawerProps={{
+    _space: '60vh',
+    _borderRadius: '10px',
+  }}
+>
+  {#snippet children({ isDrawer, isMenu, })}
+    {#if cellEditorInfoActive}
+      <div
+        class:cell-editor-container={isMenu}
+        style:padding='10px'
+        bind:this={cellEditorContainer}
+      >
+        <div style:grid-column="1 / 3">
+          {#if cellEditorInfoActive.type.key === "string"}
+            <LabelAndTextField
+              label={cellEditorInfoActive.title}
+              description={cellEditorInfoActive.description}
+              name={cellEditorInfoActive.title}
+              info={cellEditorInfoActive.info}
+              type="text"
+              orientation="horizontal"
               bind:value={cellEditorInfoActive.value}
+              --simple-textfield-border-radius= 0.5rem
+              --simple-textfield-background-color= transparent
+              --simple-textfield-box-shadow= 'inset 0 0 0 1px rgb(var(--global-color-background-500))'
+              --simple-textfield-focus-box-shadow='inset 0 0 0 2px rgb(var(--global-color-primary-500))'
             />
-            <label style:margin-left="0.7rem" for={cellEditorInfoActive.title}
-              >{cellEditorInfoActive.title}
-            </label>
-          </div>
-        {/if}
-      </div>
+          {:else if cellEditorInfoActive.type.key === "number"}
+            <LabelAndTextField
+              label={cellEditorInfoActive.title}
+              description={cellEditorInfoActive.description}
+              name={cellEditorInfoActive.title}
+              info={cellEditorInfoActive.info}
+              type="number"
+              orientation="horizontal"
+              error={saveEditDisabled}
+              bind:value={cellEditorInfoActive.value}
+              --simple-textfield-border-radius= 0.5rem
+              --simple-textfield-background-color= transparent
+              --simple-textfield-box-shadow= 'inset 0 0 0 1px rgb(var(--global-color-background-500))'
+              --simple-textfield-focus-box-shadow='inset 0 0 0 2px rgb(var(--global-color-primary-500))'
+            />
+          {:else if cellEditorInfoActive.type.key === "select"}
+            <LabelAndSelect
+              label={cellEditorInfoActive.title}
+              description={cellEditorInfoActive.description}
+              name={cellEditorInfoActive.title}
+              info={cellEditorInfoActive.info}
+              options={cellEditorInfoActive.type.params.options}
+              orientation="horizontal"
+              bind:value={cellEditorInfoActive.value}
+            />
+          {:else if cellEditorInfoActive.type.key === "boolean"}
+            <div class="container">
+              <Checkbox
+                id={cellEditorInfoActive.title}
+                bind:value={cellEditorInfoActive.value}
+              />
+              <label style:margin-left="0.7rem" for={cellEditorInfoActive.title}
+                >{cellEditorInfoActive.title}
+              </label>
+            </div>
+          {/if}
+        </div>
 
-      <div style:margin-top="10px" style:grid-row="2" style:grid-column="1 / 3">
-        <Divider --divider-color=rgb(var(--global-color-contrast-100) />
-      </div>
-      <div style:grid-row="3" style:grid-column="2" style:margin-top="-15px">
-        <ConfirmOrCancelButtons
-          confirmDisable={saveEditDisabled}
-          confirmText="Save"
-          cancelText="Cancel"
-          oncancelClick={handleCancelClick}
-          onconfirmClick={handleSaveClick}
-        />
+        <div style:grid-column=2 style:margin-top="-15px">
+          <ConfirmOrCancelButtons
+            confirmDisable={saveEditDisabled}
+            confirmText="Save"
+            cancelText="Cancel"
+            oncancelClick={handleCancelClick}
+            onconfirmClick={handleSaveClick}
+          />
+        </div>
       </div>
-    </div>
-  </Menu>
-{/if}
+    {/if}
+  {/snippet}
+</MenuOrDrawer>
 
-{#if quickFilterActive}
-  <Menu
-    bind:open={openQuickFilter}
-    activator={quickFilterActivator}
-    bind:menuElement={menuElementQuickFilters}
-    anchor="bottom"
-    openingId="quick-filter"
-    closeOnClickOutside
-  >
-    <div
-      class="quick-filter-container"
-    >
-      <div style:grid-column="1 / 3">
-        {#if quickFilterActive.type.key == 'custom'}
-          {@render customQuickFilterSnippet?.({ quickFilter: quickFilterActive, setQuickFilterMissingValue })}
-        {:else if quickFilterActive.type.key === "string"}
-          <div class="space-between" style="font-weight: 500;">
-            {quickFilterActive.title}
-            {#if !!quickFilterActive.type.missingLabel}
-              <button
-                onclick={() =>
-                  setQuickFilterMissingValue(quickFilterActive!)}
-                >{quickFilterActive.type.missingLabel}</button
-              >
-            {/if}
-          </div>
-          <LabelAndTextField
-            description={quickFilterActive.description}
-            name={quickFilterActive.title}
-            info={quickFilterActive.info}
-            type="text"
-            bind:value={quickFilterActive.type.value}          
-            --simple-textfield-border-radius= 0.5rem
-            --simple-textfield-background-color= transparent
-            --simple-textfield-box-shadow= 'inset 0 0 0 1px rgb(var(--global-color-background-500))'
-            --simple-textfield-focus-box-shadow='inset 0 0 0 2px rgb(var(--global-color-primary-500))'
-          />
-        {:else if quickFilterActive.type.key === "number"}
-          <div class="space-between" style="font-weight: 500; margin-bottom: 8px;">
-            {quickFilterActive.title}
-            {#if !!quickFilterActive.type.missingLabel}
-              <button
-                onclick={() =>
-                  setQuickFilterMissingValue(quickFilterActive!)}
-                >{quickFilterActive.type.missingLabel}</button
-              >
-            {/if}
-          </div>
-          <LabelAndTextField
-            description={quickFilterActive.description}
-            name={quickFilterActive.title}
-            info={quickFilterActive.info}
-            type="number"
-            error={saveEditDisabled}
-            bind:value={quickFilterActive.type.value}          
-            --simple-textfield-border-radius= 0.5rem
-            --simple-textfield-background-color= transparent
-            --simple-textfield-box-shadow= 'inset 0 0 0 1px rgb(var(--global-color-background-500))'
-            --simple-textfield-focus-box-shadow='inset 0 0 0 2px rgb(var(--global-color-primary-500))'
-          />
-        {:else if quickFilterActive.type.key === "multi-select"}
-          <div class="space-between" style="font-weight: 500; margin-bottom: 8px;">
-            {quickFilterActive.title}
-            {#if !!quickFilterActive.type.missingLabel}
-              <button
-                onclick={() =>
-                  setQuickFilterMissingValue(quickFilterActive!)}
-                >{quickFilterActive.type.missingLabel}</button
+<MenuOrDrawer
+  bind:open={openQuickFilter}
+  menuProps={{
+    activator: quickFilterActivator,
+    anchor: 'bottom',
+    openingId: 'quick-filter',
+    closeOnClickOutside: true
+  }}
+  drawerProps={{
+    _space: '60vh',
+    _borderRadius: '10px',
+  }}
+>
+  {#snippet children({ isDrawer, isMenu })}
+    {#if quickFilterActive}
+      <div
+        class:quick-filter-container={isMenu}
+        style:padding='10px'
+      >
+        <div style:grid-column="1 / 3">
+          {#if quickFilterActive.type.key == 'custom'}
+            {@render customQuickFilterSnippet?.({ quickFilter: quickFilterActive, setQuickFilterMissingValue })}
+          {:else if quickFilterActive.type.key === "string"}
+            <div class="space-between" style="font-weight: 500;">
+              {quickFilterActive.title}
+              {#if !!quickFilterActive.type.missingLabel}
+                <button
+                  onclick={() =>
+                    setQuickFilterMissingValue(quickFilterActive!)}
+                  >{quickFilterActive.type.missingLabel}</button
+                >
+              {/if}
+            </div>
+            <LabelAndTextField
+              description={quickFilterActive.description}
+              name={quickFilterActive.title}
+              info={quickFilterActive.info}
+              type="text"
+              bind:value={quickFilterActive.type.value}          
+              --simple-textfield-border-radius= 0.5rem
+              --simple-textfield-background-color= transparent
+              --simple-textfield-box-shadow= 'inset 0 0 0 1px rgb(var(--global-color-background-500))'
+              --simple-textfield-focus-box-shadow='inset 0 0 0 2px rgb(var(--global-color-primary-500))'
+            />
+          {:else if quickFilterActive.type.key === "number"}
+            <div class="space-between" style="font-weight: 500; margin-bottom: 8px;">
+              {quickFilterActive.title}
+              {#if !!quickFilterActive.type.missingLabel}
+                <button
+                  onclick={() =>
+                    setQuickFilterMissingValue(quickFilterActive!)}
+                  >{quickFilterActive.type.missingLabel}</button
+                >
+              {/if}
+            </div>
+            <LabelAndTextField
+              description={quickFilterActive.description}
+              name={quickFilterActive.title}
+              info={quickFilterActive.info}
+              type="number"
+              error={saveEditDisabled}
+              bind:value={quickFilterActive.type.value}          
+              --simple-textfield-border-radius= 0.5rem
+              --simple-textfield-background-color= transparent
+              --simple-textfield-box-shadow= 'inset 0 0 0 1px rgb(var(--global-color-background-500))'
+              --simple-textfield-focus-box-shadow='inset 0 0 0 2px rgb(var(--global-color-primary-500))'
+            />
+          {:else if quickFilterActive.type.key === "multi-select"}
+            <div class="space-between" style="font-weight: 500; margin-bottom: 8px;">
+              {quickFilterActive.title}
+              {#if !!quickFilterActive.type.missingLabel}
+                <button
+                  onclick={() =>
+                    setQuickFilterMissingValue(quickFilterActive!)}
+                  >{quickFilterActive.type.missingLabel}</button
+                >
+              {/if}
+            </div>
+            <div onclick={e => e.stopPropagation()} role="presentation" tabindex="-1">
+              <Autocomplete
+                multiple
+                items={quickFilterActive.type.items}
+                bind:values={quickFilterActive.type.values}
+                mobileDrawer={isDrawer}
+                --autocomplete-border-radius= 0.5rem
+                --autocomplete-border="1px solid rgb(var(--global-color-background-500))"
+                --autocomplete-focus-box-shadow="0 0 0 2px rgb(var(--global-color-primary-500))"
               >
-            {/if}
-          </div>
-          <div onclick={e => e.stopPropagation()} role="presentation" tabindex="-1">
-            <Autocomplete
-              multiple
-              items={quickFilterActive.type.items}
-              bind:values={quickFilterActive.type.values}
-              --autocomplete-border-radius= 0.5rem
-              --autocomplete-border="1px solid rgb(var(--global-color-background-500))"
-              --autocomplete-focus-box-shadow="0 0 0 2px rgb(var(--global-color-primary-500))"
-            >
-              {#snippet selectionSnippet({ selection, unselect })}
-                {#if selectionInternalSnippet}
-                  {@render selectionInternalSnippet({ selection, unselect })}
-                {:else}
-                  <div tabindex="-1">
-                    <Chip
-                      close={true}
-                      onclose={() => unselect(selection)}
-                      --chip-default-border-radius="var(--autocomplete-border-radius, var(--autocomplete-default-border-radius))"
-                      buttonTabIndex={-1}
-                      truncateText
-                    >
-                      {#if chipLabelSnippet}
-                        {@render chipLabelSnippet({ selection })}
-                      {:else}
-                        {#if quickFilterActive!.type.key == 'multi-select' && !!quickFilterActive!.type.countriesAlpha2 && quickFilterActive!.type.countriesAlpha2.find((c) => c.value == selection.value)}
-                          <div>
-                            <FlagIcon
-                              alpha2={quickFilterActive!.type.countriesAlpha2
-                                .find((c) => c.value == selection.value)
-                                ?.label?.toString()
-                                .toLowerCase() ?? ""}
-                              --flag-icon-size="16px"
-                            />
-                          </div>
+                {#snippet selectionSnippet({ selection, unselect })}
+                  {#if selectionInternalSnippet}
+                    {@render selectionInternalSnippet({ selection, unselect })}
+                  {:else}
+                    <div tabindex="-1">
+                      <Chip
+                        close={true}
+                        onclose={() => unselect(selection)}
+                        --chip-default-border-radius="var(--autocomplete-border-radius, var(--autocomplete-default-border-radius))"
+                        buttonTabIndex={-1}
+                        truncateText
+                      >
+                        {#if chipLabelSnippet}
+                          {@render chipLabelSnippet({ selection })}
+                        {:else}
+                          {#if quickFilterActive!.type.key == 'multi-select' && !!quickFilterActive!.type.countriesAlpha2 && quickFilterActive!.type.countriesAlpha2.find((c) => c.value == selection.value)}
+                            <div>
+                              <FlagIcon
+                                alpha2={quickFilterActive!.type.countriesAlpha2
+                                  .find((c) => c.value == selection.value)
+                                  ?.label?.toString()
+                                  .toLowerCase() ?? ""}
+                                --flag-icon-size="16px"
+                              />
+                            </div>
+                          {/if}
+                          {selection.label}
                         {/if}
-                        {selection.label}
-                      {/if}
-                    </Chip>
-                  </div>
-                {/if}
-              {/snippet}
-              {#snippet itemLabelSnippet({ item })}
-                {#if itemLabelInternalSnippet}
-                  {@render itemLabelInternalSnippet({ item })}
-                {:else}
-                  {#if quickFilterActive!.type.key == 'multi-select' && !!quickFilterActive!.type.countriesAlpha2 && quickFilterActive!.type.countriesAlpha2.find((c) => c.value == item.value)}
-                    <FlagIcon
-                      alpha2={quickFilterActive!.type.countriesAlpha2
-                        .find((c) => c.value == item.value)
-                        ?.label?.toString()
-                        .toLowerCase() ?? ""}
-                    />
+                      </Chip>
+                    </div>
                   {/if}
-                  {item.label}
-                {/if}
-              {/snippet}
-            </Autocomplete>
-          </div>
-        {:else if quickFilterActive.type.key === "boolean"}
-          {#if quickFilterActive.type.params}
-            <div class="vertical-quick-filters">
-              <button
-                onclick={() => setQuickFilterValue(quickFilterActive!, true)}
-              >
-                {quickFilterActive.type.params.labelTrue}
-              </button>
-              <button
-                onclick={() => setQuickFilterValue(quickFilterActive!, false)}
-              >
-                {quickFilterActive.type.params.labelFalse}
-              </button>
-              <button
-                onclick={() => setQuickFilterValue(quickFilterActive!, undefined)}
-              >
-                {lang == 'en' ? 'All' : 'Tutti'}
-              </button>
+                {/snippet}
+                {#snippet itemLabelSnippet({ item })}
+                  {#if itemLabelInternalSnippet}
+                    {@render itemLabelInternalSnippet({ item })}
+                  {:else}
+                    {#if quickFilterActive!.type.key == 'multi-select' && !!quickFilterActive!.type.countriesAlpha2 && quickFilterActive!.type.countriesAlpha2.find((c) => c.value == item.value)}
+                      <FlagIcon
+                        alpha2={quickFilterActive!.type.countriesAlpha2
+                          .find((c) => c.value == item.value)
+                          ?.label?.toString()
+                          .toLowerCase() ?? ""}
+                      />
+                    {/if}
+                    {item.label}
+                  {/if}
+                {/snippet}
+              </Autocomplete>
             </div>
-          {/if}
-        {:else if quickFilterActive.type.key === "country"}
-          <div class="space-between" style="font-weight: 500; margin-bottom: 8px;">
-            {quickFilterActive.title}
-            {#if !!quickFilterActive.type.missingLabel}
-              <button
-                onclick={() =>
-                  setQuickFilterMissingValue(quickFilterActive!)}
-                >{quickFilterActive.type.missingLabel}</button
-              >
+          {:else if quickFilterActive.type.key === "boolean"}
+            {#if quickFilterActive.type.params}
+              <div class="vertical-quick-filters">
+                <button
+                  onclick={() => setQuickFilterValue(quickFilterActive!, true)}
+                >
+                  {quickFilterActive.type.params.labelTrue}
+                </button>
+                <button
+                  onclick={() => setQuickFilterValue(quickFilterActive!, false)}
+                >
+                  {quickFilterActive.type.params.labelFalse}
+                </button>
+                <button
+                  onclick={() => setQuickFilterValue(quickFilterActive!, undefined)}
+                >
+                  {lang == 'en' ? 'All' : 'Tutti'}
+                </button>
+              </div>
             {/if}
-          </div>
-          <div onclick={e => e.stopPropagation()} role="presentation" tabindex="-1">
-            <CountriesAutocomplete
-              bind:selected={quickFilterActive.type.selected}
-              {...((!!quickFilterActive.type.countriesOptions && quickFilterActive.type.countriesOptions.length > 0) && {
-                items: quickFilterActive.type.countriesOptions,
-              })}
-              autocompleteProps={{
-                placeholder: !!quickFilterActive.type.selected
-                  ? quickFilterActive.type.selected.length > 0
-                    ? ""
-                    : quickFilterActive.description
-                  : quickFilterActive.description,
-                multiple: true,
-              }}
-              --autocomplete-border-radius= 0.5rem
-              --autocomplete-border="1px solid rgb(var(--global-color-background-500))"
-              --autocomplete-focus-box-shadow="0 0 0 2px rgb(var(--global-color-primary-500))"
-            />
-          </div>
-        {:else if quickFilterActive.type.key === "date"}
-          <div style="font-weight: 500; margin-bottom: 8px;">
-            {quickFilterActive.title}
-          </div>
-          <div onclick={e => e.stopPropagation()} role="presentation" tabindex="-1">
-            <div>
-              <DatePickerTextField
-                bind:selectedDate={quickFilterActive.type.from}
-                placeholder={lang == 'en' ? "From" : 'Da'}
-                --simple-textfield-width="100%"
-                --simple-textfield-border-radius= 0.5rem
-                --simple-textfield-background-color= transparent
-                --simple-textfield-box-shadow= 'inset 0 0 0 1px rgb(var(--global-color-background-500))'
-                --simple-textfield-focus-box-shadow='inset 0 0 0 2px rgb(var(--global-color-primary-500))'
-                flipOnOverflow
-                bind:menuOpened={calendarOpened}
-                ondayClick={() => (calendarOpened = false)}
-              >
-                {#snippet appendInnerSnippet({ appendInnerIcon, iconSize })}
-                  <Icon
-                    name="mdi-close-circle"
-                    onclick={() => {
-                      if (
-                        !!quickFilterActive &&
-                        quickFilterActive.type.key === "date"
-                      ) {
-                        quickFilterActive.type.from = undefined;
-                      }
-                    }}
-                  />
-                {/snippet}
-              </DatePickerTextField>
+          {:else if quickFilterActive.type.key === "country"}
+            <div class="space-between" style="font-weight: 500; margin-bottom: 8px;">
+              {quickFilterActive.title}
+              {#if !!quickFilterActive.type.missingLabel}
+                <button
+                  onclick={() =>
+                    setQuickFilterMissingValue(quickFilterActive!)}
+                  >{quickFilterActive.type.missingLabel}</button
+                >
+              {/if}
             </div>
-            <div>
-              <DatePickerTextField
-                bind:selectedDate={quickFilterActive.type.to}
-                placeholder={lang == 'en' ? "To" : 'A'}
-                --simple-textfield-width="100%"
-                --simple-textfield-border-radius= 0.5rem
-                --simple-textfield-background-color= transparent
-                --simple-textfield-box-shadow= 'inset 0 0 0 1px rgb(var(--global-color-background-500))'
-                --simple-textfield-focus-box-shadow='inset 0 0 0 2px rgb(var(--global-color-primary-500))'
-                flipOnOverflow
-                bind:menuOpened={calendarOpened2}
-                ondayClick={() => (calendarOpened2 = false)}
-              >
-                {#snippet appendInnerSnippet({ appendInnerIcon, iconSize })}
-                  <Icon
-                    name="mdi-close-circle"
-                    onclick={() => {
-                      if (
-                        !!quickFilterActive &&
-                        quickFilterActive.type.key === "date"
-                      ) {
-                        quickFilterActive.type.to = undefined;
-                      }
-                    }}
-                  />
-                {/snippet}
-              </DatePickerTextField>
+            <div onclick={e => e.stopPropagation()} role="presentation" tabindex="-1">
+              <CountriesAutocomplete
+                bind:selected={quickFilterActive.type.selected}
+                {...((!!quickFilterActive.type.countriesOptions && quickFilterActive.type.countriesOptions.length > 0) && {
+                  items: quickFilterActive.type.countriesOptions,
+                })}
+                autocompleteProps={{
+                  placeholder: !!quickFilterActive.type.selected
+                    ? quickFilterActive.type.selected.length > 0
+                      ? ""
+                      : quickFilterActive.description
+                    : quickFilterActive.description,
+                  multiple: true,
+                  mobileDrawer: isDrawer,
+                }}
+                --autocomplete-border-radius= 0.5rem
+                --autocomplete-border="1px solid rgb(var(--global-color-background-500))"
+                --autocomplete-focus-box-shadow="0 0 0 2px rgb(var(--global-color-primary-500))"
+              />
+            </div>
+          {:else if quickFilterActive.type.key === "date"}
+            <div style="font-weight: 500; margin-bottom: 8px;">
+              {quickFilterActive.title}
+            </div>
+            <div onclick={e => e.stopPropagation()} role="presentation" tabindex="-1">
+              <div>
+                <DatePickerTextField
+                  bind:selectedDate={quickFilterActive.type.from}
+                  placeholder={lang == 'en' ? "From" : 'Da'}
+                  --simple-textfield-width="100%"
+                  --simple-textfield-border-radius= 0.5rem
+                  --simple-textfield-background-color= transparent
+                  --simple-textfield-box-shadow= 'inset 0 0 0 1px rgb(var(--global-color-background-500))'
+                  --simple-textfield-focus-box-shadow='inset 0 0 0 2px rgb(var(--global-color-primary-500))'
+                  flipOnOverflow
+                  mobileDialog={isDrawer}
+                  bind:menuOpened={calendarOpened}
+                  ondayClick={() => (calendarOpened = false)}
+                >
+                  {#snippet appendInnerSnippet({ appendInnerIcon, iconSize })}
+                    <Icon
+                      name="mdi-close-circle"
+                      onclick={() => {
+                        if (
+                          !!quickFilterActive &&
+                          quickFilterActive.type.key === "date"
+                        ) {
+                          quickFilterActive.type.from = undefined;
+                        }
+                      }}
+                    />
+                  {/snippet}
+                </DatePickerTextField>
+              </div>
+              <div>
+                <DatePickerTextField
+                  bind:selectedDate={quickFilterActive.type.to}
+                  placeholder={lang == 'en' ? "To" : 'A'}
+                  --simple-textfield-width="100%"
+                  --simple-textfield-border-radius= 0.5rem
+                  --simple-textfield-background-color= transparent
+                  --simple-textfield-box-shadow= 'inset 0 0 0 1px rgb(var(--global-color-background-500))'
+                  --simple-textfield-focus-box-shadow='inset 0 0 0 2px rgb(var(--global-color-primary-500))'
+                  flipOnOverflow
+                  mobileDialog={isDrawer}
+                  bind:menuOpened={calendarOpened2}
+                  ondayClick={() => (calendarOpened2 = false)}
+                >
+                  {#snippet appendInnerSnippet({ appendInnerIcon, iconSize })}
+                    <Icon
+                      name="mdi-close-circle"
+                      onclick={() => {
+                        if (
+                          !!quickFilterActive &&
+                          quickFilterActive.type.key === "date"
+                        ) {
+                          quickFilterActive.type.to = undefined;
+                        }
+                      }}
+                    />
+                  {/snippet}
+                </DatePickerTextField>
+              </div>
             </div>
+          {/if}
+        </div>
+
+        {#if quickFilterActive.type.key != "boolean"}
+          <div style:grid-column=2 style:margin-top="-10px">
+            <ConfirmOrCancelButtons
+              confirmDisable={saveEditDisabled}
+              confirmText={lang == 'en' ? "Apply" : 'Applica'}
+              cancelText={lang == 'en' ? "Cancel" : 'Annulla'}
+              oncancelClick={handleCancelClick}
+              onconfirmClick={() => handleApplyClick(quickFilterActive!, quickFilterActive!.type.key == 'custom')}
+            />
           </div>
         {/if}
       </div>
-
-      {#if quickFilterActive.type.key != "boolean"}
-        <div style:grid-row="3" style:grid-column="2" style:margin-top="-10px">
-          <ConfirmOrCancelButtons
-            confirmDisable={saveEditDisabled}
-            confirmText={lang == 'en' ? "Apply" : 'Applica'}
-            cancelText={lang == 'en' ? "Cancel" : 'Annulla'}
-            oncancelClick={handleCancelClick}
-            onconfirmClick={() => handleApplyClick(quickFilterActive!, quickFilterActive!.type.key == 'custom')}
-          />
-        </div>
-      {/if}
-    </div>
-  </Menu>
-{/if}
+    {/if}
+  {/snippet}
+</MenuOrDrawer>
 
 <MediaQuery>
   {#snippet defaultSnippet({ sAndDown })}
@@ -1807,6 +1831,9 @@ function resizeHeader(th, header) {
                 <div
                   style:flex-grow=1
                 >
+                  {#if !!item.icon}
+                    <Icon name={item.icon} />
+                  {/if}
                   {item.name}
                 </div>
                 <Switch
@@ -1839,6 +1866,9 @@ function resizeHeader(th, header) {
                 <div
                   style:flex-grow=1
                 >
+                  {#if !!header.icon}
+                    <Icon name={header.icon} />
+                  {/if}
                   {header.name}
                 </div>
                 <Switch
@@ -2053,14 +2083,12 @@ function resizeHeader(th, header) {
     align-items: center;
     box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);
     position: fixed;
-    padding: 10px;
     border-radius: 10px;
     background-color: var(
       --dynamic-table-cell-editor-background-color,
       var(--dynamic-table-default-cell-editor-background-color)
     );
-    height: 200px;
-    width: 500px;
+    width: 400px;
   }
 
   .row-activator {
@@ -2077,7 +2105,6 @@ function resizeHeader(th, header) {
     align-items: center;
     box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);
     position: fixed;
-    padding: 10px;
     border-radius: 10px;
     background-color: var(
       --dynamic-table-quick-filter-background-color,