@likable-hair/svelte 3.0.57 → 3.0.59

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

@@ -0,0 +1,42 @@
+<script>import "../../../css/main.css";
+import Menu from "../../simple/common/Menu.svelte";
+export let activator, menuOpen = false, menuProps = {}, appearTimeout = void 0;
+let mouseEnterHandler = void 0, mouseLeaveHandler = void 0, appearTimeoutId = void 0;
+$:
+  if (!!activator) {
+    if (!!mouseEnterHandler)
+      activator.removeEventListener("mouseenter", mouseEnterHandler);
+    if (!!mouseLeaveHandler)
+      activator.removeEventListener("mouseleave", mouseLeaveHandler);
+    mouseEnterHandler = () => {
+      if (appearTimeout !== void 0) {
+        if (appearTimeoutId !== void 0)
+          clearTimeout(appearTimeoutId);
+        appearTimeoutId = setTimeout(() => {
+          menuOpen = true;
+        }, appearTimeout);
+      } else {
+        menuOpen = true;
+      }
+    };
+    activator.addEventListener("mouseenter", mouseEnterHandler);
+    mouseLeaveHandler = () => {
+      if (appearTimeoutId !== void 0)
+        clearTimeout(appearTimeoutId);
+      menuOpen = false;
+    };
+    activator.addEventListener("mouseleave", mouseLeaveHandler);
+  }
+</script>
+
+<Menu
+  bind:open={menuOpen}
+  bind:activator
+  anchor="bottom-center"
+  stayInViewport={true}
+  flipOnOverflow={true}
+  {...menuProps}
+>
+  <slot></slot>
+</Menu>
+

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

@@ -0,0 +1,46 @@
+import { SvelteComponentTyped } from "svelte";
+import '../../../css/main.css';
+declare const __propDef: {
+    props: {
+        activator: HTMLElement;
+        menuOpen?: boolean | undefined;
+        menuProps?: {
+            _top?: number | undefined;
+            _left?: number | undefined;
+            _width?: string | undefined;
+            _height?: string | undefined;
+            _maxHeight?: string | undefined;
+            _minWidth?: string | undefined;
+            _overflow?: string | undefined;
+            _boxShadow?: string | undefined;
+            _borderRadius?: string | undefined;
+            _activatorGap?: number | undefined;
+            open?: boolean | undefined;
+            refreshPosition?: boolean | undefined;
+            activator?: HTMLElement | undefined;
+            anchor?: "bottom" | "bottom-center" | "right-center" | undefined;
+            closeOnClickOutside?: boolean | undefined;
+            inAnimation?: ((node: Element, params?: import("svelte/transition").SlideParams | import("svelte/transition").FlyParams | import("svelte/transition").FadeParams | undefined) => import("svelte/transition").TransitionConfig) | undefined;
+            inAnimationConfig?: import("svelte/transition").SlideParams | import("svelte/transition").FlyParams | import("svelte/transition").FadeParams | undefined;
+            outAnimation?: ((node: Element, params?: import("svelte/transition").SlideParams | import("svelte/transition").FlyParams | import("svelte/transition").FadeParams | undefined) => import("svelte/transition").TransitionConfig) | undefined;
+            outAnimationConfig?: import("svelte/transition").SlideParams | import("svelte/transition").FlyParams | import("svelte/transition").FadeParams | undefined;
+            menuElement?: HTMLElement | undefined;
+            flipOnOverflow?: boolean | undefined;
+            stayInViewport?: boolean | undefined;
+            openingId?: string | undefined;
+        } | undefined;
+        appearTimeout?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ToolTipProps = typeof __propDef.props;
+export type ToolTipEvents = typeof __propDef.events;
+export type ToolTipSlots = typeof __propDef.slots;
+export default class ToolTip extends SvelteComponentTyped<ToolTipProps, ToolTipEvents, ToolTipSlots> {
+}
+export {};

package/dist/components/composed/forms/CountriesAutocomplete.svelte.d.ts

@@ -31,6 +31,7 @@ declare const __propDef: {
             searchText?: string | undefined;
             maxVisibleChips?: number | undefined;
             menuOpened?: boolean | undefined;
+            closeOnSelect?: boolean | undefined;
             menuBoxShadow?: string | undefined;
             menuBorderRadius?: string | undefined;
             mobileDrawer?: boolean | undefined;

package/dist/components/composed/forms/DatePickerTextField.svelte

@@ -11,7 +11,7 @@ import Dialog from "../../simple/dialogs/Dialog.svelte";
 let clazz = {};
 export { clazz as class };
 let dispatch = createEventDispatcher();
-export let menuOpened = false, openingId = "date-picker-text-field", pattern = "dd/MM/yyyy", selectedMonth = void 0, selectedYear = void 0, visibleMonth = void 0, visibleYear = void 0, selectedDate = void 0, placeholder = void 0, mobileDialog = true;
+export let menuOpened = false, openingId = "date-picker-text-field", pattern = "dd/MM/yyyy", selectedMonth = void 0, selectedYear = void 0, visibleMonth = void 0, visibleYear = void 0, selectedDate = void 0, placeholder = void 0, mobileDialog = true, maxYearInRange = 2100, minYearInRange = 1970;
 let activator, refreshPosition = false, menuElement, inputElement, mask = {
   value: void 0
 }, maskFactoryArgs = {
@@ -26,8 +26,8 @@ let activator, refreshPosition = false, menuElement, inputElement, mask = {
   blocks: {
     yyyy: {
       mask: IMask.MaskedRange,
-      from: 1970,
-      to: 2030
+      from: minYearInRange,
+      to: maxYearInRange
     },
     MM: {
       mask: IMask.MaskedRange,

package/dist/components/composed/forms/DatePickerTextField.svelte.d.ts

@@ -18,6 +18,8 @@ declare const __propDef: {
         selectedDate?: Date | undefined;
         placeholder?: string | undefined;
         mobileDialog?: boolean | undefined;
+        maxYearInRange?: number | undefined;
+        minYearInRange?: number | undefined;
     };
     events: {
         'day-click': CustomEvent<{

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

@@ -14,7 +14,7 @@ export let headers = [], items = [], sortedBy = void 0, sortDirection = void 0,
   { label: "20", value: 20 },
   { label: "50", value: 50 },
   { label: "100", value: 100 }
-], hideRowsPerPage = false, totalElements = void 0, rowsPerPage = 20, filters = [], searchBarColumns = void 0, searchBarVisible = true, lang = "en";
+], hideRowsPerPage = false, totalElements = void 0, rowsPerPage = 20, filters = [], searchBarColumns = void 0, searchBarVisible = true, searchBarPlaceholder = "Type something to search...", customFiltersValid = {}, customFiltersValues = void 0, lang = "en";
 let searchBarInput, searchText = void 0;
 let dispatch = createEventDispatcher();
 let rowsPerPageSelection = [];
@@ -39,7 +39,8 @@ function handleSearchChange(searchText2) {
   let converter = new Converter();
   let builder;
   builder = converter.createBuilder({
-    filters: filters || []
+    filters: filters || [],
+    customFiltersValues
   });
   if (!!searchText2 && !!searchBarColumns && searchBarColumns.length > 0) {
     builder.where((b) => {
@@ -64,7 +65,7 @@ function handleFiltersChange() {
   {#if searchBarVisible}
     <slot name="search-bar" {handleSearchChange}>
       <SearchBar
-        placeholder="Type something to search..."
+        placeholder={searchBarPlaceholder}
         bind:input={searchBarInput}
         bind:value={searchText}
       >
@@ -78,10 +79,17 @@ function handleFiltersChange() {
       on:removeFilter={handleFiltersChange}
       --filters-default-wrapper-width="100%"
       {lang}
-    > 
+      {customFiltersValid}
+    >
       <svelte:fragment slot="append">
         <slot name="filter-append"></slot>
       </svelte:fragment>
+      <svelte:fragment slot="custom" let:filter>
+        <slot name="custom-filter" {filter}></slot>
+      </svelte:fragment>
+      <svelte:fragment slot="custom-mobile" let:filter>
+        <slot name="custom-filter-mobile" {filter}></slot>
+      </svelte:fragment>
     </Filters>
   </div>
   <SimpleTable

package/dist/components/composed/list/PaginatedTable.svelte.d.ts

@@ -24,6 +24,13 @@ declare const __propDef: {
         filters?: ComponentProps<Filters>['filters'];
         searchBarColumns?: string[] | undefined;
         searchBarVisible?: boolean | undefined;
+        searchBarPlaceholder?: string | undefined;
+        customFiltersValid?: {
+            [filterName: string]: boolean;
+        } | undefined;
+        customFiltersValues?: {
+            [filterName: string]: any;
+        } | undefined;
         lang?: "it" | "en" | undefined;
     };
     events: {
@@ -44,6 +51,12 @@ declare const __propDef: {
             handleSearchChange: (searchText: string | undefined) => void;
         };
         'filter-append': {};
+        'custom-filter': {
+            filter: import("../../../utils/filters/filters").Filter | undefined;
+        };
+        'custom-filter-mobile': {
+            filter: import("../../../utils/filters/filters").Filter | undefined;
+        };
         header: {
             head: import("../../simple/lists/SimpleTable.svelte").Header;
         };

package/dist/components/composed/progress/HorizontalStackedProgress.css

@@ -0,0 +1,3 @@
+:root {
+  --horizontal-stacked-progress-default-gap: 4px
+}

package/dist/components/composed/progress/HorizontalStackedProgress.svelte

@@ -0,0 +1,117 @@
+<script context="module">export function isProgressItem(obj) {
+  return (obj.label === void 0 || typeof obj.label === "string") && (obj.color === void 0 || typeof obj.color === "string") && typeof obj.value === "number";
+}
+</script>
+
+<script>import "./HorizontalStackedProgress.css";
+import ProgressBar from "../../simple/progress/ProgressBar.svelte";
+export let progresses = [], labelVisible = true;
+let colors = [
+  "rgb(var(--global-color-primary-500))",
+  "rgb(var(--global-color-primary-300))",
+  "rgb(var(--global-color-primary-700))",
+  "rgb(var(--global-color-primary-500), .5)",
+  "rgb(var(--global-color-primary-600), .5)",
+  "rgb(var(--global-color-primary-700), .5)"
+];
+$:
+  total = progresses.reduce((p, c, i, a) => {
+    if (isProgressItem(c)) {
+      return p + c.value;
+    } else {
+      return p + c;
+    }
+  }, 0);
+$:
+  progressesItems = progresses.map((p, i) => {
+    let item;
+    let value = isProgressItem(p) ? p.value : p;
+    let percentage = Number((100 * value / total).toFixed(2));
+    let color = isProgressItem(p) ? p.color : colors[i % colors.length];
+    item = {
+      ...isProgressItem(p) ? p : {},
+      color,
+      value,
+      percentage
+    };
+    return item;
+  }).filter((p) => p.value !== 0);
+</script>
+
+<div
+  class="stacked-container"
+>
+  {#each progressesItems as progress}
+    <div
+      style:width={progress.percentage + '%'}
+      class="single-progress-container"
+    >
+      <ProgressBar
+        total={progress.value}
+        value={progress.value}
+        --progress-bar-highlight-color={progress.color}
+      ></ProgressBar>
+      {#if progress.label && labelVisible}
+        <div class="label">
+          <div class="label-text">{progress.label}</div>
+          <div class="label-value">
+            <div 
+              class="dot" 
+              style:background-color={progress.color || 'rgb(var(--global-color-background-300))'}
+            ></div>
+            <div class="value-text">
+              {progress.value}
+            </div>
+          </div>
+        </div>
+      {/if}
+    </div>
+  {/each}
+</div>
+
+<style>
+  .stacked-container {
+    overflow: hidden;
+    display: flex;
+    gap: var(
+      --horizontal-stacked-progress-gap,
+      var(--horizontal-stacked-progress-default-gap)
+    );
+    width: var(
+      --horizontal-stacked-progress-width,
+      var(--horizontal-stacked-progress-default-width)
+    );
+  }
+
+  .single-progress-container {
+    transition: width 300ms cubic-bezier(0.215, 0.610, 0.355, 1);
+    display: flex;
+    flex-direction: column;
+  }
+
+  .label-text {
+    font-size: .8rem;
+    font-weight: 300;
+  }
+
+  .label {
+    margin-top: 12px;
+  }
+
+  .label-value {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .value-text {
+    font-size: 1.1rem;
+    font-weight: 700;
+  }
+
+  .dot {
+    height: 10px;
+    width: 10px;
+    border-radius: 9999px;
+  }
+</style>

package/dist/components/composed/progress/HorizontalStackedProgress.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+export type ProgressItem = {
+    label?: string;
+    color?: string;
+    value: number;
+};
+export declare function isProgressItem(obj: any): obj is ProgressItem;
+import './HorizontalStackedProgress.css';
+declare const __propDef: {
+    props: {
+        progresses?: (number | ProgressItem)[] | undefined;
+        labelVisible?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type HorizontalStackedProgressProps = typeof __propDef.props;
+export type HorizontalStackedProgressEvents = typeof __propDef.events;
+export type HorizontalStackedProgressSlots = typeof __propDef.slots;
+export default class HorizontalStackedProgress extends SvelteComponentTyped<HorizontalStackedProgressProps, HorizontalStackedProgressEvents, HorizontalStackedProgressSlots> {
+}
+export {};

package/dist/components/composed/search/FilterEditor.svelte

@@ -7,11 +7,11 @@ import { createEventDispatcher } from "svelte";
 import Validator from "../../../utils/filters/validator";
 import Autocomplete from "../../simple/forms/Autocomplete.svelte";
 import Checkbox from "../../simple/forms/Checkbox.svelte";
-export let filter = void 0, lang = "en", cancelFilterLabel = lang == "en" ? "Cancel" : "Annulla", applyFilterLabel = lang == "en" ? "Apply filter" : "Applica filter", betweenFromLabel = lang == "en" ? "From" : "Da", betweenToLabel = lang == "en" ? "To" : "A", labelsMapper;
+export let filter = void 0, lang = "en", cancelFilterLabel = lang == "en" ? "Cancel" : "Annulla", applyFilterLabel = lang == "en" ? "Apply filter" : "Applica filter", betweenFromLabel = lang == "en" ? "From" : "Da", betweenToLabel = lang == "en" ? "To" : "A", labelsMapper, forceApplyValid = false;
 let tmpFilter;
 let advancedModeOptions, advancedModeSelectedOptions;
 function initTmpFilter() {
-  tmpFilter = structuredClone(filter);
+  tmpFilter = filter === void 0 ? void 0 : { ...filter };
   if (!!tmpFilter && ["string", "number", "date", "select"].includes(tmpFilter.type) && Object.keys(tmpFilter).includes("mode")) {
     if (tmpFilter.mode == "between" && tmpFilter.from !== void 0 && tmpFilter.to !== void 0 || tmpFilter.value !== void 0 || tmpFilter.type == "select" && tmpFilter.values !== void 0 && tmpFilter.values.length > 0) {
       advancedModeSelectedOptions = [{
@@ -36,7 +36,7 @@ function handleCancelFilterClick(e) {
 }
 function handleApplyFilterClick() {
   if (!!filter && !!tmpFilter) {
-    filter = structuredClone(tmpFilter);
+    filter = { ...tmpFilter };
     filter.active = true;
     dispatch("apply");
   }
@@ -83,7 +83,7 @@ function handleAdvancedModeSelection() {
   dropdownOpened = false;
 }
 $:
-  applyFilterDisabled = !Validator.isValid(tmpFilter);
+  applyFilterDisabled = !Validator.isValid(tmpFilter) && !forceApplyValid;
 $:
   if (!!tmpFilter && tmpFilter.type == "bool") {
     if (tmpFilter.value === void 0) {
@@ -200,6 +200,8 @@ $:
               {tmpFilter.description}
             </span>
           </div>
+        {:else if tmpFilter.type == 'custom'}
+          <slot name="custom" filter={tmpFilter}></slot>
         {/if}
       {/if}
     </div>

package/dist/components/composed/search/FilterEditor.svelte.d.ts

@@ -10,6 +10,7 @@ declare const __propDef: {
         betweenFromLabel?: string | undefined;
         betweenToLabel?: string | undefined;
         labelsMapper: LabelMapper;
+        forceApplyValid?: boolean | undefined;
     };
     events: {
         click: MouseEvent;
@@ -19,7 +20,11 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        custom: {
+            filter: Filter | undefined;
+        };
+    };
 };
 export type FilterEditorProps = typeof __propDef.props;
 export type FilterEditorEvents = typeof __propDef.events;

package/dist/components/composed/search/Filters.svelte

@@ -13,7 +13,7 @@ import Chip from "../../simple/navigation/Chip.svelte";
 import FilterEditor from "./FilterEditor.svelte";
 import MobileFilterEditor from "./MobileFilterEditor.svelte";
 import { fly } from "svelte/transition";
-export let filters = [], lang = "en", addFilterLabel = lang == "en" ? "Filters" : "Filtri", cancelFilterLabel = lang == "en" ? "Cancel" : "Annulla", applyFilterLabel = lang == "en" ? "Apply filter" : "Applica filtro", showActiveFilters = true, filterTitleLabel = lang == "en" ? "Filter by" : "Filtra per", dateLocale = "en", betweenSeparator = lang == "en" ? "and" : "e", trueString = lang == "en" ? "true" : "vero", falseString = lang == "en" ? "false" : "falso", labelsMapper = lang == "en" ? {
+export let filters = [], lang = "en", addFilterLabel = lang == "en" ? "Filters" : "Filtri", cancelFilterLabel = lang == "en" ? "Cancel" : "Annulla", applyFilterLabel = lang == "en" ? "Apply filter" : "Applica filtro", showActiveFilters = true, filterTitleLabel = lang == "en" ? "Filter by" : "Filtra per", dateLocale = "en", betweenSeparator = lang == "en" ? "and" : "e", trueString = lang == "en" ? "true" : "vero", falseString = lang == "en" ? "false" : "falso", customFiltersValid = {}, labelsMapper = lang == "en" ? {
   "equal": {
     extended: "equal to",
     short: "equal"
@@ -24,6 +24,9 @@ export let filters = [], lang = "en", addFilterLabel = lang == "en" ? "Filters"
   "ilike": {
     short: "includes"
   },
+  "contains": {
+    short: "contains"
+  },
   "greater": {
     short: "greater",
     extended: "greater than"
@@ -51,6 +54,9 @@ export let filters = [], lang = "en", addFilterLabel = lang == "en" ? "Filters"
   "ilike": {
     short: "include"
   },
+  "contains": {
+    short: "contiene"
+  },
   "greater": {
     short: "maggiore",
     extended: "maggiore di"
@@ -288,10 +294,10 @@ function handleDeleteIconClick(e) {
     >
       <div class="drawer-content">
         {#if !!selectedFilter && singleFilterMenuOpened}
-          <div 
-            class="drawer-filter-detail" 
-            style:height="100%" 
-            in:fly|local={{delay: 100, duration: 100, x: 200}} 
+          <div
+            class="drawer-filter-detail"
+            style:height="100%"
+            in:fly|local={{delay: 100, duration: 100, x: 200}}
             out:fly|local={{duration: 100, x: -200}}
           >
             <MobileFilterEditor
@@ -303,20 +309,26 @@ function handleDeleteIconClick(e) {
               on:cancelClick={() => {mobileOpen = false; closeFilterMenu(200)}}
               {lang}
               {labelsMapper}
+              forceApplyValid={!!customFiltersValid[selectedFilter.name]}
             >
               <div slot="title">
                 <div class="mobile-title">
                   {selectedFilter?.label}
                 </div>
               </div>
+
+              <svelte:fragment slot="custom" let:filter>
+                <slot name="custom-mobile" {filter}></slot>
+              </svelte:fragment>
+
             </MobileFilterEditor>
           </div>
         {:else}
-          <div 
-            class="drawer-filter-list" 
-            style:margin-top="20px" 
-            style:height="100%" 
-            out:fly|local={{duration: 100, x: -200}} 
+          <div
+            class="drawer-filter-list"
+            style:margin-top="20px"
+            style:height="100%"
+            out:fly|local={{duration: 100, x: -200}}
             in:fly|local={{duration: 100, x: 200, delay: 100}}
           >
             <SelectableVerticalList
@@ -401,7 +413,12 @@ function handleDeleteIconClick(e) {
             on:apply={handleApplyFilterClick}
             {lang}
             {labelsMapper}
-          ></FilterEditor>
+            forceApplyValid={!!customFiltersValid[selectedFilter.name]}
+          >
+            <svelte:fragment slot="custom" let:filter>
+              <slot name="custom" {filter}></slot>
+            </svelte:fragment>
+          </FilterEditor>
         {/if}
       </div>
     </Menu>

package/dist/components/composed/search/Filters.svelte.d.ts

@@ -23,6 +23,9 @@ declare const __propDef: {
         betweenSeparator?: string | undefined;
         trueString?: string | undefined;
         falseString?: string | undefined;
+        customFiltersValid?: {
+            [filterName: string]: boolean;
+        } | undefined;
         labelsMapper?: LabelMapper | undefined;
     };
     events: {
@@ -38,6 +41,12 @@ declare const __propDef: {
     };
     slots: {
         append: {};
+        'custom-mobile': {
+            filter: Filter | undefined;
+        };
+        custom: {
+            filter: Filter | undefined;
+        };
     };
 };
 export type FiltersProps = typeof __propDef.props;

package/dist/components/composed/search/MobileFilterEditor.svelte

@@ -9,11 +9,11 @@ import Icon from "../../simple/media/Icon.svelte";
 import { fly } from "svelte/transition";
 import Autocomplete from "../../simple/forms/Autocomplete.svelte";
 import Checkbox from "../../simple/forms/Checkbox.svelte";
-export let filter = void 0, lang = "en", cancelFilterLabel = lang == "en" ? "Cancel" : "Annulla", applyFilterLabel = lang == "en" ? "Apply filter" : "Applica filtro", backIcon = "mdi-arrow-left", betweenFromLabel = lang == "en" ? "From" : "Da", betweenToLabel = lang == "en" ? "To" : "A", labelsMapper;
+export let filter = void 0, lang = "en", cancelFilterLabel = lang == "en" ? "Cancel" : "Annulla", applyFilterLabel = lang == "en" ? "Apply filter" : "Applica filtro", backIcon = "mdi-arrow-left", betweenFromLabel = lang == "en" ? "From" : "Da", betweenToLabel = lang == "en" ? "To" : "A", labelsMapper, forceApplyValid = false;
 let dispatch = createEventDispatcher();
 function handleApplyFilterClick() {
   if (!!filter && !!tmpFilter) {
-    filter = structuredClone(tmpFilter);
+    filter = { ...tmpFilter };
     filter.active = true;
     dispatch("apply");
   }
@@ -21,7 +21,7 @@ function handleApplyFilterClick() {
 let step;
 let tmpFilter;
 function initTmpFilter() {
-  tmpFilter = structuredClone(filter);
+  tmpFilter = filter === void 0 ? void 0 : { ...filter };
   if (!!tmpFilter && tmpFilter.advanced) {
     if (["string", "number", "date", "select"].includes(tmpFilter.type) && Object.keys(tmpFilter).includes("mode")) {
       if (tmpFilter.mode == "between" && tmpFilter.from !== void 0 && tmpFilter.to !== void 0 || tmpFilter.value !== void 0 || tmpFilter.type == "select" && tmpFilter.values !== void 0 && tmpFilter.values.length > 0) {
@@ -84,7 +84,7 @@ function handleAdvancedModeSelection() {
 }
 let canRenderOptions = true;
 $:
-  applyFilterDisabled = !Validator.isValid(tmpFilter);
+  applyFilterDisabled = !Validator.isValid(tmpFilter) && !forceApplyValid;
 function handleModeBackClick() {
   dispatch("backClick");
 }
@@ -245,6 +245,8 @@ $:
                     {tmpFilter.description}
                   </span>
                 </div>
+              {:else if tmpFilter.type == 'custom'}
+                <slot name="custom" filter={tmpFilter}></slot>
               {/if}
             </div>
           </div>

package/dist/components/composed/search/MobileFilterEditor.svelte.d.ts

@@ -11,6 +11,7 @@ declare const __propDef: {
         betweenFromLabel?: string | undefined;
         betweenToLabel?: string | undefined;
         labelsMapper: LabelMapper;
+        forceApplyValid?: boolean | undefined;
     };
     events: {
         keypress: KeyboardEvent;
@@ -24,6 +25,9 @@ declare const __propDef: {
     };
     slots: {
         title: {};
+        custom: {
+            filter: Filter | undefined;
+        };
     };
 };
 export type MobileFilterEditorProps = typeof __propDef.props;

package/dist/components/simple/forms/Autocomplete.svelte

@@ -5,7 +5,7 @@ import "./Autocomplete.css";
 import { scrollInMenu } from "../common/scroller";
 let clazz = {};
 export { clazz as class };
-export let values = [], items, searchFunction = void 0, multiple = false, disabled = false, mandatory = false, placeholder = "", width = "auto", height = "auto", maxWidth = void 0, openingId = "autocomplete-menu", searchText = void 0, maxVisibleChips = void 0, menuOpened = false, menuBoxShadow = "rgb(var(--global-color-background-300), .5) 0px 2px 4px", menuBorderRadius = "5px", mobileDrawer = false;
+export let values = [], items, searchFunction = void 0, multiple = false, disabled = false, mandatory = false, placeholder = "", width = "auto", height = "auto", maxWidth = void 0, openingId = "autocomplete-menu", searchText = void 0, maxVisibleChips = void 0, menuOpened = false, closeOnSelect = false, menuBoxShadow = "rgb(var(--global-color-background-300), .5) 0px 2px 4px", menuBorderRadius = "5px", mobileDrawer = false;
 let dispatch = createEventDispatcher();
 function select(item) {
   const alreadyPresent = values.findIndex((i) => i.value === item.value) != -1;
@@ -21,6 +21,8 @@ function select(item) {
       selection: values
     });
   }
+  if (!multiple && closeOnSelect)
+    menuOpened = false;
 }
 function unselect(item) {
   if (values.length == 1 && mandatory)

package/dist/components/simple/forms/Autocomplete.svelte.d.ts

@@ -29,6 +29,7 @@ declare const __propDef: {
         searchText?: string | undefined;
         maxVisibleChips?: number | undefined;
         menuOpened?: boolean | undefined;
+        closeOnSelect?: boolean | undefined;
         menuBoxShadow?: string | undefined;
         menuBorderRadius?: string | undefined;
         mobileDrawer?: boolean | undefined;

package/dist/components/simple/forms/FileInput.css

@@ -0,0 +1,7 @@
+:root {
+  --file-input-default-height: 64px;
+  --file-input-default-background-color: rgb(var(--global-color-background-300));
+  --file-input-default-color: rgb(var(--global-color-contrast-900));
+  --file-input-default-focus-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  --file-input-default-border-radius: 5px;
+}