@likable-hair/svelte 3.3.8 → 3.3.10

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

@@ -6,7 +6,7 @@ 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";
+export let selectedItems, showSelectContainer, isSelectedAll, totalRows, slotSelectActionsContainer, disabled, loading, actionsForSelectedItems, position = "top", lang = "en";
 let actions = [], extraActions = [], moreActionsActivator, openMoreActions = false, infoActivators = {}, disabledInfoActivators = {};
 $: {
   if (!!slotSelectActionsContainer) {
@@ -32,7 +32,7 @@ $: {
     >
       <div>
         <button class="select-info" on:click={() => (selectedItems = [], infoActivators = {}, disabledInfoActivators = {})}>
-          {!!isSelectedAll ? totalRows : selectedItems.length} items selected
+          {!!isSelectedAll ? totalRows : selectedItems.length} {lang == 'en' ? 'items selected' : 'righe selezionate'}
           <Icon name="mdi-close" />
         </button>
       </div>
@@ -125,7 +125,7 @@ $: {
               >
                 <div class="action">
                   <Icon name="mdi-dots-vertical" />
-                  More
+                  {lang == 'en' ? 'More' : 'Altri'}
                 </div>
               </Button>
             </div>

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

@@ -23,6 +23,7 @@ declare const __propDef: {
         loading: boolean;
         actionsForSelectedItems: Action[];
         position?: "bottom" | "top" | undefined;
+        lang?: "it" | "en" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -61,10 +61,12 @@ const [send, receive] = crossfade({
 let clazz = {};
 export { clazz as class };
 const dispatch = createEventDispatcher();
-export let headers = [], headersToShowInTable = headers, subHeaders = [], customizeHeaders = false, rows = [], sortedBy = void 0, sortDirection = "asc", cellEdit = false, noItemsText = "No items to show", showSelect = false, showSelectContainer = true, selectMode = "single", selectedItems = [], showExpand = false, loading = false, disabled = false, filters = [], searchBarColumns = void 0, searchBarVisible = false, searchBarPlaceholder = "Type to search for identification code, description and MRN...", filtersVisible = false, quickFiltersVisible = false, lang = "en", editFilterMode = "one-edit", showActiveFilters = true, quickFilters = [], actionsForSelectedItems = [], hasMoreToLoad = false, totalRows = rows.length, searchText = void 0, renderedRowsNumber = 100, sectionRowsNumber = 20, sectionTreshold = 2, backwardTresholdPixel = 100, forwardTresholdPixel = 100;
-let openCellEditor = false, cellEditorActivator, cellEditorContainer, menuElementCellEditor, menuElementQuickFilters, cellEditorInfoActive, saveEditDisabled = false, searchBarInput = void 0, openQuickFilter = false, quickFilterActivator, quickFilterActive, globalBuilder = new FilterBuilder(), slotSelectActionsContainer, isSelectedAll = false, calendarOpened = false, calendarOpened2 = false, selectedIndexes = [], cellEditorIndexRow, cellEditorIndexHeader, cellEditorSubItem, currentSectionNumber = 0, tableBody, tableContainer, userScrolling = true;
+export let headers = [], headersToShowInTable = headers, subHeaders = [], customizeHeaders = false, rows = [], sortedBy = void 0, sortDirection = "asc", cellEdit = false, noItemsText = "No items to show", showSelect = false, showSelectContainer = true, selectMode = "single", selectedItems = [], showExpand = false, loading = false, disabled = false, filters = [], searchBarColumns = void 0, searchBarVisible = false, searchBarPlaceholder = "Type to search for identification code, description and MRN...", filtersVisible = false, quickFiltersVisible = false, lang = "en", editFilterMode = "one-edit", showActiveFilters = true, quickFilters = [], actionsForSelectedItems = [], totalRows = rows.length, searchText = void 0, renderedRowsNumber = 100, sectionRowsNumber = 20, sectionTreshold = 2, backwardTresholdPixel = 100, forwardTresholdPixel = 100;
+let openCellEditor = false, cellEditorActivator, cellEditorContainer, menuElementCellEditor, menuElementQuickFilters, cellEditorInfoActive, saveEditDisabled = false, searchBarInput = void 0, openQuickFilter = false, quickFilterActivator, quickFilterActive, globalBuilder = new FilterBuilder(), slotSelectActionsContainer, isSelectedAll = false, calendarOpened = false, calendarOpened2 = false, selectedIndexes = [], cellEditorIndexRow, cellEditorIndexHeader, cellEditorSubItem, currentSectionNumber = 0, tableBody, tableContainer, userScrolling = true, totalSections = (totalRows - renderedRowsNumber) / sectionRowsNumber;
 $:
-  totalSections = rows.length / sectionRowsNumber;
+  hasMoreToRender = totalSections > currentSectionNumber;
+$:
+  totalCachedSections = (rows.length - renderedRowsNumber) / sectionRowsNumber;
 $:
   renderedRows = rows.slice(currentSectionNumber * sectionRowsNumber, currentSectionNumber * sectionRowsNumber + renderedRowsNumber);
 let openHeaderDrawer = false, headersToSelect = !!headers ? headers.filter((h) => {
@@ -573,7 +575,7 @@ function handleLoadForward() {
   currentSectionNumber = currentSectionNumber + 1;
   tableContainer.scrollTop -= topElementsHeight;
   setTimeout(() => userScrolling = true, 20);
-  if (totalSections - sectionTreshold < currentSectionNumber) {
+  if (totalCachedSections - sectionTreshold <= currentSectionNumber && !loading && totalRows > rows.length) {
     dispatch("fetchData", {});
   }
 }
@@ -599,6 +601,7 @@ function handleLoadBackward() {
     {disabled}
     {loading}
     {actionsForSelectedItems}
+    {lang}
   />
 
   <slot name="search-bar" {handleSearchChange}>
@@ -702,8 +705,9 @@ function handleLoadBackward() {
       {/if}
     </div>
   {/if}
-
-  <div class="table-container" bind:this={tableContainer}>
+  <div class="outer-container">
+    <div class="inner-container" bind:this={tableContainer}>
+  <!-- <div class="table-container" bind:this={tableContainer}> -->
     <InfiniteScroll
       on:loadMore={handleLoadBackward}
       treshold={backwardTresholdPixel}
@@ -1074,9 +1078,10 @@ function handleLoadBackward() {
     <InfiniteScroll
       on:loadMore={handleLoadForward}
       treshold={forwardTresholdPixel}
-      hasMore={hasMoreToLoad && userScrolling}
+      hasMore={hasMoreToRender && userScrolling}
     />
   </div>
+  </div>
 {/if}
 
 <Menu
@@ -1211,7 +1216,6 @@ function handleLoadBackward() {
           name={quickFilterActive.title}
           info={quickFilterActive.info}
           type="number"
-          orientation="horizontal"
           error={saveEditDisabled}
           bind:value={quickFilterActive.type.value}          
           --simple-textfield-border-radius= 0.5rem
@@ -1295,7 +1299,7 @@ function handleLoadBackward() {
             <button
               on:click={() => setQuickFilterValue(quickFilterActive, undefined)}
             >
-              All
+              {lang == 'en' ? 'All' : 'Tutti'}
             </button>
           </div>
         {/if}
@@ -1331,7 +1335,7 @@ function handleLoadBackward() {
           <div>
             <DatePickerTextField
               bind:selectedDate={quickFilterActive.type.from}
-              placeholder={"From"}
+              placeholder={lang == 'en' ? "From" : 'Da'}
               --simple-textfield-width="100%"
               --simple-textfield-border-radius= 0.5rem
               --simple-textfield-background-color= transparent
@@ -1360,7 +1364,7 @@ function handleLoadBackward() {
           <div>
             <DatePickerTextField
               bind:selectedDate={quickFilterActive.type.to}
-              placeholder={"To"}
+              placeholder={lang == 'en' ? "To" : 'A'}
               --simple-textfield-width="100%"
               --simple-textfield-border-radius= 0.5rem
               --simple-textfield-background-color= transparent
@@ -1397,8 +1401,8 @@ function handleLoadBackward() {
       <div style:grid-row="3" style:grid-column="2" style:margin-top="-15px">
         <ConfirmOrCancelButtons
           confirmDisable={saveEditDisabled}
-          confirmText="Apply"
-          cancelText="Cancel"
+          confirmText={lang == 'en' ? "Apply" : 'Applica'}
+          cancelText={lang == 'en' ? "Cancel" : 'Annulla'}
           on:cancel-click={handleCancelClick}
           on:confirm-click={() => handleApplyClick(quickFilterActive, quickFilterActive.type.key == 'custom')}
         />
@@ -1414,9 +1418,9 @@ function handleLoadBackward() {
     position={sAndDown ? "bottom" : "right"}
   >
     <div style="padding: 20px;">
-      <div class="personalize-header">Personalize your headers</div>
+      <div class="personalize-header">{lang == 'en' ? 'Personalize your headers' : 'Personalizza le tue intestazioni'}</div>
 
-      <span class="headers-show grid-col-1">Headers shown in table</span>
+      <span class="headers-show grid-col-1">{lang == 'en' ? 'Headers shown in table' : 'Intestazioni visualizzate in tabella'}</span>
 
       {#if headersToShow}
         <VerticalDraggableList
@@ -1441,7 +1445,7 @@ function handleLoadBackward() {
         </VerticalDraggableList>
       {/if}
       <Divider --divider-color=rgb(var(--global-color-contrast-100) />
-      <span class="headers-show grid-col-1">Headers to show</span>
+      <span class="headers-show grid-col-1">{lang == 'en' ? 'Headers to show' : 'Intestazioni da mostrare'}</span>
       {#if headersToSelect && headersToSelect.length > 0}
         {#each headersToSelect as header (header.id)}
           <div
@@ -1467,7 +1471,7 @@ function handleLoadBackward() {
         {/each}
       {:else}
         <div class="headers-show grid-col-1">
-          <span style="text-align: center;">No headers to add</span>
+          <span style="text-align: center;">{lang == 'en' ? 'No headers to add' : 'Nessuna intestazione da aggiungere'}</span>
         </div>
       {/if}
       <div style="width: 100%; display: flex; justify-content: center;">
@@ -1476,7 +1480,7 @@ function handleLoadBackward() {
           --button-width="70%"
           on:click={saveHeadersToShow}
         >
-          Save preferences
+          {lang == 'en' ? 'Save preferences' : 'Salva preferenze'}
         </Button>
       </div>
     </div>
@@ -1484,15 +1488,15 @@ function handleLoadBackward() {
 </MediaQuery>
 
 <style>
-  .table-container {
-    overflow-x: auto;
+  .outer-container {
+    overflow-x: hidden;
+  }
+
+  .inner-container {
     overflow-y: auto;
-    max-height: var(
-      --dynamic-table-max-height,
-      var(--dynamic-table-default-max-height)
-    );
-    -ms-overflow-style: none;
-    scrollbar-width: none;
+    margin-right: -15px;
+    padding-right: 15px;
+    max-height: var(--dynamic-table-max-height, var(--dynamic-table-default-max-height));
   }
 
   .table {
@@ -1506,12 +1510,12 @@ function handleLoadBackward() {
   .table-header {
     position: sticky;
     top: 0;
-    z-index: 1;
+    z-index: 2;
   }
 
   .table-subheader {
   top: var(--main-header-height);
-  z-index: 0;
+  z-index: 1;
 }
   .table-header th {
     padding: var(

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

@@ -149,7 +149,6 @@ declare const __propDef: {
         showActiveFilters?: boolean | undefined;
         quickFilters?: QuickFilter[] | undefined;
         actionsForSelectedItems?: Action[] | undefined;
-        hasMoreToLoad?: boolean | undefined;
         totalRows?: number | undefined;
         searchText?: string | undefined;
         renderedRowsNumber?: number | undefined;

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

@@ -14,7 +14,7 @@ let activeFilter = Object.values(tmpFilters).reduce((count, filter) => {
     count++;
   return count;
 }, 0);
-let labelsMapper = {
+let labelsMapper = lang == "en" ? {
   equal: { extended: "equal to", short: "equal" },
   like: { short: "includes" },
   ilike: { short: "includes" },
@@ -23,6 +23,15 @@ let labelsMapper = {
   lower: { short: "lower", extended: "lower than" },
   between: { short: "between", extended: "is between" },
   different: { short: "different", extended: "different from" }
+} : {
+  equal: { extended: "uguale a", short: "uguale" },
+  like: { short: "include" },
+  ilike: { short: "include" },
+  contains: { short: "contiene" },
+  greater: { short: "maggiore", extended: "maggiore di" },
+  lower: { short: "minore", extended: "minore di" },
+  between: { short: "compreso", extended: "\xE8 compreso tra" },
+  different: { short: "diverso", extended: "diverso da" }
 };
 function selectFilter(filter) {
   selectedFilter = filter === selectedFilter ? void 0 : filter;
@@ -48,7 +57,7 @@ function handleFilterChange() {
 	
 		{#if activeFilter > 0}
 			<div class="filter-info">
-				{activeFilter} applied
+				{activeFilter} {lang == 'en' ? 'applied' : activeFilter == 1 ? 'applicato' : 'applicati'}
 				<button class="clear-button" on:click={clearFilters}>✕</button>
 			</div>
 		{/if}
@@ -95,7 +104,7 @@ function handleFilterChange() {
 			</div>
 		{:else}
 			<div class="filters-content-box">
-				<p>Please select a filter to display content.</p>
+				<p>{lang == 'en' ? 'Please select a filter to display content.' : 'Seleziona un filtro per mostrarne il contenuto.'}</p>
 			</div>
 		{/if}
 	</div>

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

@@ -71,7 +71,7 @@ export let filters = [], lang = "en", addFilterLabel = lang == "en" ? "Filters"
   },
   "between": {
     short: "compreso",
-    extended: "\xE8 compreso"
+    extended: "\xE8 compreso tra"
   },
   "different": {
     short: "diverso",

package/dist/components/layouts/UnstableDividedSideBarLayout.svelte

@@ -39,7 +39,7 @@ $:
       class:opened={sidebarExpanded}
       class="header-toolbar"
     >
-      <slot name="menu">
+      <slot name="header">
         <div class="inner-menu">
           {#if mAndDown}
             <div style:margin-right="2rem">

package/dist/components/layouts/UnstableDividedSideBarLayout.svelte.d.ts

@@ -27,10 +27,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        menu: {
-            hamburgerVisible: boolean;
-            sidebarExpanded: boolean;
-        };
+        header: {};
         'inner-menu': {
             hamburgerVisible: boolean;
         };
@@ -42,6 +39,10 @@ declare const __propDef: {
             hamburgerVisible: boolean;
             sidebarExpanded: boolean;
         };
+        menu: {
+            hamburgerVisible: boolean;
+            sidebarExpanded: boolean;
+        };
         prepend: {
             option: Option;
             handleClickClose: (option: Option, index: number) => void;

package/dist/components/simple/charts/GanymedePieChart.svelte

@@ -27,10 +27,12 @@ export let data = {
       text: ""
     }
   }
-}, showLegend = true;
+}, showLegend = true, responsive = true, maintainAspectRatio = false;
 let chartOptions;
 $:
   chartOptions = {
+    responsive,
+    maintainAspectRatio,
     plugins: {
       legend: {
         display: showLegend

package/dist/components/simple/charts/GanymedePieChart.svelte.d.ts

@@ -19,6 +19,8 @@ declare const __propDef: {
             } | undefined;
         } | undefined;
         showLegend?: boolean | undefined;
+        responsive?: boolean | undefined;
+        maintainAspectRatio?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/simple/navigation/Drawer.svelte

@@ -5,7 +5,7 @@ import { createEventDispatcher, onMount, beforeUpdate } from "svelte";
 import Teleporter from "../../../utils/teleporter";
 import Keyboarder, {} from "../../../utils/keyboarder";
 import { BROWSER } from "esm-env";
-export let open = false, position = "left", overlay = false, items = [], teleportedUid = void 0, _space = void 0, _openingSpeed = void 0, _backgroundColor = void 0, _color = void 0, _overflow = void 0, _borderRadius = void 0, _margin = void 0, _overlaySpeed = void 0, _overlayBackgroundColor = void 0, _overlayOpacity = void 0;
+export let open = false, position = "left", overlay = false, closeOnClickOutside = true, items = [], teleportedUid = void 0, _space = void 0, _openingSpeed = void 0, _backgroundColor = void 0, _color = void 0, _overflow = void 0, _borderRadius = void 0, _margin = void 0, _overlaySpeed = void 0, _overlayBackgroundColor = void 0, _overlayOpacity = void 0;
 let drawerElement, localOpen = false;
 const dispatch = createEventDispatcher();
 onMount(() => {
@@ -32,9 +32,11 @@ function closeDrawer() {
   dispatch("close", {});
 }
 function handleClickOverlay() {
-  open = false;
-  overlay = false;
-  dispatch("close", {});
+  if (closeOnClickOutside) {
+    open = false;
+    overlay = false;
+    dispatch("close", {});
+  }
 }
 let zIndex = 50;
 beforeUpdate(() => {

package/dist/components/simple/navigation/Drawer.svelte.d.ts

@@ -7,6 +7,7 @@ declare const __propDef: {
         open?: boolean | undefined;
         position?: "left" | "right" | "bottom" | "top" | undefined;
         overlay?: boolean | undefined;
+        closeOnClickOutside?: boolean | undefined;
         items?: Item[] | undefined;
         teleportedUid?: string | undefined;
         _space?: string | undefined;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair and others",
-  "version": "3.3.8",
+  "version": "3.3.10",
   "scripts": {
     "host": "vite --host",
     "dev": "vite dev",