@likable-hair/svelte 3.3.28 → 3.3.30

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

@@ -1,148 +1,85 @@
-<script lang="ts" context="module">
-  import SimpleTable, { type CalculateRowClasses, type CalculateRowStyles } from "../../simple/lists/SimpleTable.svelte";
-  import Icon from "../../simple/media/Icon.svelte";
-  import Paginator from "../../simple/lists/Paginator.svelte";
-  import Dropdown from "../forms/Dropdown.svelte";
-  import { createEventDispatcher, type ComponentEvents, type ComponentProps } from "svelte";
-
-  type ArrayElement<ArrayType extends readonly unknown[]> =
-    ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
-
-  export type Header = ArrayElement<
-    NonNullable<ComponentProps<SimpleTable>["headers"]>
-  >;
+<script context="module">import SimpleTable, {} from "../../simple/lists/SimpleTable.svelte";
+import Icon from "../../simple/media/Icon.svelte";
+import Paginator from "../../simple/lists/Paginator.svelte";
+import Dropdown from "../forms/Dropdown.svelte";
+import { createEventDispatcher } from "svelte";
 </script>
 
-<script lang="ts">
-  import Filters from "../search/Filters.svelte";
-  import SearchBar from "../search/SearchBar.svelte";
-  import type Builder from "../../../utils/filters/builder";
-  import Converter from "../../../utils/filters/filters";
-
-  let clazz: {
-    simpleTable?: ComponentProps<SimpleTable>['class']
-  } = {};
-  export { clazz as class };
-
-  export let headers: ComponentProps<SimpleTable>['headers'] = [],
-    items: ComponentProps<SimpleTable>['items'] = [],
-    sortedBy: ComponentProps<SimpleTable>['sortedBy'] = undefined,
-    sortDirection: ComponentProps<SimpleTable>['sortDirection'] = undefined,
-    page: NonNullable<ComponentProps<Paginator>['page']> = 1,
-    maxPage: ComponentProps<Paginator>['maxPage'] = undefined,
-    rowsPerPageOptions: ComponentProps<Dropdown>['items'] = [
-      { label: '20', value: 20 },
-      { label: '50', value: 50 },
-      { label: '100', value: 100 },
-    ],
-    hideRowsPerPage: boolean = false,
-    totalElements: number | undefined = undefined,
-    rowsPerPage: number = 20,
-    filters:  ComponentProps<Filters>['filters'] = [],
-    searchBarColumns: string[] | undefined = undefined,
-    searchBarVisible: boolean = true,
-    searchBarPlaceholder: string = "Type something to search...",
-    lang: 'it' | 'en' = 'en',
-    editFilterMode: 'one-edit' | 'multi-edit' = 'one-edit',
-    showActiveFilters: boolean = true,
-    resizableColumns: boolean = false,
-    resizedColumnSizeWithPadding: { [value: string]: number } = {},
-    pointerOnRowHover: boolean | undefined = undefined,
-    doubleClickActive: ComponentProps<SimpleTable>['doubleClickActive'] = false,
-    doubleClickDelay: ComponentProps<SimpleTable>['doubleClickDelay'] = 250;
-
-
-  export let calculateRowStyles: CalculateRowStyles | undefined = undefined;
-  export let calculateRowClasses: CalculateRowClasses | undefined = undefined;
-
-  let searchBarInput: HTMLElement,
-    searchText: string | undefined = undefined,
-    sortModify: Header['sortModify']
-
-  let dispatch = createEventDispatcher<{
-    paginationChange: {
-      rowsPerPage: number,
-      page: number,
-      builder: Builder
-    },
-    filtersChange: {
-      builder: Builder
-    }
-  }>()
-
-  let rowsPerPageSelection: ComponentProps<Dropdown>['values'] = []
-
-  $: rowsPerPageSelection = [
+<script>import Filters from "../search/Filters.svelte";
+import SearchBar from "../search/SearchBar.svelte";
+import Converter from "../../../utils/filters/filters";
+let clazz = {};
+export { clazz as class };
+export let headers = [], items = [], sortedBy = void 0, sortDirection = void 0, page = 1, maxPage = void 0, rowsPerPageOptions = [
+  { 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, searchBarPlaceholder = "Type something to search...", lang = "en", dateLocale = void 0, editFilterMode = "one-edit", showActiveFilters = true, resizableColumns = false, resizedColumnSizeWithPadding = {}, pointerOnRowHover = void 0, doubleClickActive = false, doubleClickDelay = 250;
+export let calculateRowStyles = void 0;
+export let calculateRowClasses = void 0;
+let searchBarInput, searchText = void 0, sortModify;
+let dispatch = createEventDispatcher();
+let rowsPerPageSelection = [];
+$:
+  rowsPerPageSelection = [
     { label: rowsPerPage.toString(), value: rowsPerPage }
-  ]
-
-  $: if(totalElements !== undefined) maxPage = Math.max(Math.round(totalElements/rowsPerPage), 1)
-
-  function handleRowsPerPageChange(e: CustomEvent<{ selection: ComponentProps<Dropdown>['items']}>) {
-    rowsPerPage = Number(e.detail.selection?.[0].value)
-    handlePaginationChange()
-  }
-
-  function handlePaginationChange() {
-    let builder = buildFilters()
-
-    dispatch('paginationChange', {
-      rowsPerPage, page, builder
-    })
-  }
-
-  function handleSearchChange(searchText: string | undefined) {
-    let builder = buildFilters({searchText})
-
-    dispatch('filtersChange', {
-      builder
-    })
-  }
-
-  $: handleSearchChange(searchText)
-
-  function handleSort(e: ComponentEvents<SimpleTable>['sort']) {
-    sortModify = e.detail.sortModify
-    handleFiltersChange()
-  }
-
-  function handleFiltersChange() {
-    let builder = buildFilters({searchText})
-
-    dispatch('filtersChange', {
-      builder
-    })
-  }
-
-  function buildFilters(params?:{searchText?:string | undefined}){
-    let converter = new Converter()
-    let builder: Builder
-    builder = converter.createBuilder({
-      filters: filters || []
-    })
-
-    if(!!params?.searchText && !!searchBarColumns && searchBarColumns.length > 0) {
-
-      builder.where(b => {
-        b.where(searchBarColumns![0], 'ilike', '%' + params?.searchText + '%')
-        for(let i = 1; i < searchBarColumns!.length; i += 1) {
-          b.orWhere(searchBarColumns![i], 'ilike', '%' + params?.searchText + '%')
-        }
-      })
-    }
-
-    if (!!sortedBy) {
-      if(sortModify){
-        builder = sortModify({ builder, sortDirection: sortDirection || 'asc' })
-      }
-      else {
-        builder.orderBy(sortedBy, sortDirection || "asc");
+  ];
+$:
+  if (totalElements !== void 0)
+    maxPage = Math.max(Math.round(totalElements / rowsPerPage), 1);
+function handleRowsPerPageChange(e) {
+  rowsPerPage = Number(e.detail.selection?.[0].value);
+  handlePaginationChange();
+}
+function handlePaginationChange() {
+  let builder = buildFilters();
+  dispatch("paginationChange", {
+    rowsPerPage,
+    page,
+    builder
+  });
+}
+function handleSearchChange(searchText2) {
+  let builder = buildFilters({ searchText: searchText2 });
+  dispatch("filtersChange", {
+    builder
+  });
+}
+$:
+  handleSearchChange(searchText);
+function handleSort(e) {
+  sortModify = e.detail.sortModify;
+  handleFiltersChange();
+}
+function handleFiltersChange() {
+  let builder = buildFilters({ searchText });
+  dispatch("filtersChange", {
+    builder
+  });
+}
+function buildFilters(params) {
+  let converter = new Converter();
+  let builder;
+  builder = converter.createBuilder({
+    filters: filters || []
+  });
+  if (!!params?.searchText && !!searchBarColumns && searchBarColumns.length > 0) {
+    builder.where((b) => {
+      b.where(searchBarColumns[0], "ilike", "%" + params?.searchText + "%");
+      for (let i = 1; i < searchBarColumns.length; i += 1) {
+        b.orWhere(searchBarColumns[i], "ilike", "%" + params?.searchText + "%");
       }
+    });
+  }
+  if (!!sortedBy) {
+    if (sortModify) {
+      builder = sortModify({ builder, sortDirection: sortDirection || "asc" });
+    } else {
+      builder.orderBy(sortedBy, sortDirection || "asc");
     }
-
-    return builder
   }
-
+  return builder;
+}
 </script>
 
 <div class="paginated-table">
@@ -168,6 +105,7 @@
       on:removeAllFilters
       --filters-default-wrapper-width="100%"
       {lang}
+      {dateLocale}
       {editFilterMode}
       {showActiveFilters}
     >
@@ -182,6 +120,9 @@
       </svelte:fragment>
     </Filters>
   </div>
+
+  <slot name="totals"></slot>
+
   <SimpleTable
     bind:headers
     bind:class={clazz.simpleTable}
@@ -286,7 +227,7 @@
     width: 100%;
     display: flex;
     flex-direction: column;
-    gap: 24px;
+    gap: 8px;
   }
 
   .header-sort-icon {

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

@@ -1,3 +1,4 @@
+import { SvelteComponent } from "svelte";
 import SimpleTable, { type CalculateRowClasses, type CalculateRowStyles } from "../../simple/lists/SimpleTable.svelte";
 import Paginator from "../../simple/lists/Paginator.svelte";
 import Dropdown from "../forms/Dropdown.svelte";
@@ -5,114 +6,115 @@ import { type ComponentProps } from "svelte";
 type ArrayElement<ArrayType extends readonly unknown[]> = ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
 export type Header = ArrayElement<NonNullable<ComponentProps<SimpleTable>["headers"]>>;
 import Filters from "../search/Filters.svelte";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
+import type Builder from "../../../utils/filters/builder";
+declare const __propDef: {
+    props: {
+        class?: {
+            simpleTable?: ComponentProps<SimpleTable>['class'];
+        } | undefined;
+        headers?: ComponentProps<SimpleTable>['headers'];
+        items?: ComponentProps<SimpleTable>['items'];
+        sortedBy?: ComponentProps<SimpleTable>['sortedBy'];
+        sortDirection?: ComponentProps<SimpleTable>['sortDirection'];
+        page?: number | undefined;
+        maxPage?: ComponentProps<Paginator>['maxPage'];
+        rowsPerPageOptions?: ComponentProps<Dropdown>['items'];
+        hideRowsPerPage?: boolean | undefined;
+        totalElements?: number | undefined;
+        rowsPerPage?: number | undefined;
+        filters?: ComponentProps<Filters>['filters'];
+        searchBarColumns?: string[] | undefined;
+        searchBarVisible?: boolean | undefined;
+        searchBarPlaceholder?: string | undefined;
+        lang?: "it" | "en" | undefined;
+        dateLocale?: 'it' | 'en' | undefined;
+        editFilterMode?: "one-edit" | "multi-edit" | undefined;
+        showActiveFilters?: boolean | undefined;
+        resizableColumns?: boolean | undefined;
+        resizedColumnSizeWithPadding?: {
+            [value: string]: number;
+        } | undefined;
+        pointerOnRowHover?: boolean | undefined;
+        doubleClickActive?: ComponentProps<SimpleTable>['doubleClickActive'];
+        doubleClickDelay?: ComponentProps<SimpleTable>['doubleClickDelay'];
+        calculateRowStyles?: CalculateRowStyles | undefined;
+        calculateRowClasses?: CalculateRowClasses | undefined;
     };
-    z_$$bindings?: Bindings;
-}
-declare const PaginatedTable: $$__sveltets_2_IsomorphicComponent<{
-    class?: {
-        simpleTable?: ComponentProps<SimpleTable>["class"];
-    };
-    headers?: ComponentProps<SimpleTable>["headers"];
-    items?: ComponentProps<SimpleTable>["items"];
-    sortedBy?: ComponentProps<SimpleTable>["sortedBy"];
-    sortDirection?: ComponentProps<SimpleTable>["sortDirection"];
-    page?: NonNullable<ComponentProps<Paginator>["page"]>;
-    maxPage?: ComponentProps<Paginator>["maxPage"];
-    rowsPerPageOptions?: ComponentProps<Dropdown>["items"];
-    hideRowsPerPage?: boolean;
-    totalElements?: number | undefined;
-    rowsPerPage?: number;
-    filters?: ComponentProps<Filters>["filters"];
-    searchBarColumns?: string[] | undefined;
-    searchBarVisible?: boolean;
-    searchBarPlaceholder?: string;
-    lang?: "it" | "en";
-    editFilterMode?: "one-edit" | "multi-edit";
-    showActiveFilters?: boolean;
-    resizableColumns?: boolean;
-    resizedColumnSizeWithPadding?: {
-        [value: string]: number;
-    };
-    pointerOnRowHover?: boolean | undefined;
-    doubleClickActive?: ComponentProps<SimpleTable>["doubleClickActive"];
-    doubleClickDelay?: ComponentProps<SimpleTable>["doubleClickDelay"];
-    calculateRowStyles?: CalculateRowStyles | undefined;
-    calculateRowClasses?: CalculateRowClasses | undefined;
-}, {
-    removeFilter: CustomEvent<{
-        filter: import("../../../utils/filters/filters").Filter;
-    }>;
-    removeAllFilters: CustomEvent<undefined>;
-    sort: CustomEvent<{
-        sortedBy: string | undefined;
-        sortDirection: string;
-        sortModify: import("../../simple/lists/SimpleTable.svelte").Header["sortModify"];
-    }>;
-    rowClick: CustomEvent<{
-        item: import("../../simple/lists/SimpleTable.svelte").Item;
-    }>;
-    rowDoubleClick: CustomEvent<{
-        item: import("../../simple/lists/SimpleTable.svelte").Item;
-    }>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    'search-bar': {
-        handleSearchChange: (searchText: string | undefined) => void;
-    };
-    'filter-append': {};
-    'custom-filter-chip': {
-        filter: import("../../../utils/filters/filters").Filter;
-    };
-    'custom-filter': {
-        filter: import("../../../utils/filters/filters").Filter;
-        updateFunction: (filterName: string, newValue: any, newValid: boolean) => void;
-        mAndDown: boolean;
-    };
-    header: {
-        head: import("../../simple/lists/SimpleTable.svelte").Header;
+    events: {
+        removeFilter: CustomEvent<{
+            filter: import("../../../utils/filters/filters").Filter;
+        }>;
+        removeAllFilters: CustomEvent<undefined>;
+        sort: CustomEvent<{
+            sortedBy: string | undefined;
+            sortDirection: string;
+            sortModify: ((params: {
+                builder: Builder;
+                sortDirection: "desc" | "asc";
+            }) => Builder) | undefined;
+        }>;
+        rowClick: CustomEvent<{
+            item: import("../../simple/lists/SimpleTable.svelte").Item;
+        }>;
+        rowDoubleClick: CustomEvent<{
+            item: import("../../simple/lists/SimpleTable.svelte").Item;
+        }>;
+    } & {
+        [evt: string]: CustomEvent<any>;
     };
-    headerLabel: {};
-    custom: {
-        index: any;
-        columnIndex: any;
-        header: import("../../simple/lists/SimpleTable.svelte").Header;
-        item: import("../../simple/lists/SimpleTable.svelte").Item;
+    slots: {
+        'search-bar': {
+            handleSearchChange: (searchText: string | undefined) => void;
+        };
+        'filter-append': {};
+        'custom-filter-chip': {
+            filter: import("../../../utils/filters/filters").Filter;
+        };
+        'custom-filter': {
+            filter: import("../../../utils/filters/filters").Filter;
+            updateFunction: (filterName: string, newValue: any, newValid: boolean) => void;
+            mAndDown: boolean;
+        };
+        totals: {};
+        header: {
+            head: import("../../simple/lists/SimpleTable.svelte").Header;
+        };
+        headerLabel: {};
+        custom: {
+            index: any;
+            columnIndex: any;
+            header: import("../../simple/lists/SimpleTable.svelte").Header;
+            item: import("../../simple/lists/SimpleTable.svelte").Item;
+        };
+        rowActions: {
+            index: any;
+            item: import("../../simple/lists/SimpleTable.svelte").Item;
+        };
+        append: {
+            index: any;
+            item: import("../../simple/lists/SimpleTable.svelte").Item;
+        };
+        footer: {
+            hideRowsPerPage: boolean;
+            rowsPerPageOptions: import("../forms/Dropdown.svelte").Item[] | undefined;
+            rowsPerPageSelection: import("../forms/Dropdown.svelte").Item[];
+            totalElements: number | undefined;
+            page: number;
+            maxPage: number | undefined;
+            rowsPerPage: number;
+            handlePaginationChange: () => void;
+        };
+        rangeDescriptor: {
+            page: number;
+            maxPage: number | undefined;
+            rowsPerPage: number;
+            totalElements: number | undefined;
+        };
     };
-    rowActions: {
-        index: any;
-        item: import("../../simple/lists/SimpleTable.svelte").Item;
-    };
-    append: {
-        index: any;
-        item: import("../../simple/lists/SimpleTable.svelte").Item;
-    };
-    footer: {
-        hideRowsPerPage: boolean;
-        rowsPerPageOptions: import("../forms/Dropdown.svelte").Item[] | undefined;
-        rowsPerPageSelection: import("../forms/Dropdown.svelte").Item[];
-        totalElements: number | undefined;
-        page: number;
-        maxPage: number | undefined;
-        rowsPerPage: number;
-        handlePaginationChange: () => void;
-    };
-    rangeDescriptor: {
-        page: number;
-        maxPage: number | undefined;
-        rowsPerPage: number;
-        totalElements: number | undefined;
-    };
-}, {}, string>;
-type PaginatedTable = InstanceType<typeof PaginatedTable>;
-export default PaginatedTable;
+};
+export type PaginatedTableProps = typeof __propDef.props;
+export type PaginatedTableEvents = typeof __propDef.events;
+export type PaginatedTableSlots = typeof __propDef.slots;
+export default class PaginatedTable extends SvelteComponent<PaginatedTableProps, PaginatedTableEvents, PaginatedTableSlots> {
+}
+export {};

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

@@ -6,4 +6,8 @@
   --horizontal-stacked-progress-label-gap: 12px;
   --horizontal-stacked-progress-legend-margin-top: 8px;
   --progress-bar-default-tooltip-padding: 8px;
+  --horizontal-stacked-progress-default-label-font-size: .8rem;
+  --horizontal-stacked-progress-default-label-font-weight: 300;
+  --horizontal-stacked-progress-default-value-font-size: 1.1rem;
+  --horizontal-stacked-progress-default-value-font-weight: 700;
 }

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

@@ -1,69 +1,41 @@
-<script lang="ts" context="module">
-  export type ProgressItem = {
-    label?: string,
-    color?: string,
-    value: number,
-    valueLabel?: string | number
-  };
-
-  export function isProgressItem(obj: any): obj is ProgressItem {
-    return (
-      (obj.label === undefined || typeof obj.label === 'string') &&
-      (obj.color === undefined || typeof obj.color === 'string') &&
-      typeof obj.value === 'number'
-    );
-  }
+<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 lang="ts">
-  import './HorizontalStackedProgress.css'
-  import ProgressBar from "../../simple/progress/ProgressBar.svelte";
-
-  export let progresses: (
-      number | 
-      ProgressItem
-    )[] = [],
-    labelVisible: boolean = true,
-    labelValueVisible: boolean = true,
-    labelTextVisible: boolean = true,
-    legendVisible: boolean = false,
-    legendValueVisible: boolean = true,
-    legendTextVisible: boolean = true,
-    hideLabelUnderPercentage: number | undefined = undefined
-
-  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<number>((p, c, i, a) => {
-    if(isProgressItem(c)) {
-      return p + c.value
+<script>import "./HorizontalStackedProgress.css";
+import ProgressBar from "../../simple/progress/ProgressBar.svelte";
+export let progresses = [], labelVisible = true, labelValueVisible = true, labelTextVisible = true, legendVisible = false, legendValueVisible = true, legendTextVisible = true, hideLabelUnderPercentage = void 0, tooltipVisible = 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
+      return p + c;
     }
-  }, 0)
-
-  $: progressesItems = progresses.map((p, i) => {
-    let item: ProgressItem & { percentage: number }
-    let value = isProgressItem(p) ? p.value : p
-    // x : 100 = value : total
-    let percentage = Number(((100 * value) / total).toFixed(2))
-    let color = isProgressItem(p) ? p.color : colors[i % colors.length]
-
+  }, 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 : {}),
+      ...isProgressItem(p) ? p : {},
       color,
       value,
       percentage
-    }
-
-    return item
-  }).filter(p => p.value !== 0)
+    };
+    return item;
+  }).filter((p) => p.value !== 0);
 </script>
 
 <div class="horizontal-stacked-progress">
@@ -79,7 +51,7 @@
           total={progress.value}
           value={progress.value}
           --progress-bar-highlight-color={progress.color}
-          valueTooltip
+          valueTooltip={tooltipVisible}
           valueTooltipLabel={progress.valueLabel || progress.value}
         ></ProgressBar>
         {#if progress.label && labelVisible && (hideLabelUnderPercentage === undefined || progress.percentage > hideLabelUnderPercentage)}
@@ -154,8 +126,14 @@
   }
 
   .label-text {
-    font-size: .8rem;
-    font-weight: 300;
+    font-size: var(
+      --horizontal-stacked-progress-label-font-size,
+      var(--horizontal-stacked-progress-default-label-font-size)
+    );
+    font-weight: var(
+      --horizontal-stacked-progress-label-font-weight,
+      var(--horizontal-stacked-progress-default-label-font-weight)
+    );
   }
 
   .label {
@@ -172,8 +150,14 @@
   }
 
   .value-text {
-    font-size: 1.1rem;
-    font-weight: 700;
+    font-size: var(
+      --horizontal-stacked-progress-value-font-size,
+      var(--horizontal-stacked-progress-default-value-font-size)
+    );
+    font-weight: var(
+      --horizontal-stacked-progress-value-font-weight,
+      var(--horizontal-stacked-progress-default-value-font-weight)
+    );
   }
 
   .dot {