@likable-hair/svelte 3.1.23 → 3.1.25

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

@@ -7,7 +7,7 @@ import { createEventDispatcher } from "svelte";
 import Avatar from "../../simple/media/Avatar.svelte";
 import ToolTip from "../common/ToolTip.svelte";
 let dispatch = createEventDispatcher();
-export let items = [], values = [], multiple = true, menuOpened = false, openingId = void 0, width = void 0, disabled = false, menuWidth = "144px";
+export let items = [], values = [], multiple = true, menuOpened = false, openingId = void 0, width = void 0, minWidth = "auto", disabled = false, menuWidth = "144px";
 function handleCloseClick(params) {
   let unselected = lodash.cloneDeep(values[params.index]);
   values.splice(params.index, 1);
@@ -43,6 +43,7 @@ let tooltipsActivator = [];
   bind:menuOpened
   bind:openingId
   bind:width
+  bind:minWidth
   bind:disabled
   menuWidth={menuWidth}
 >

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

@@ -16,6 +16,7 @@ declare const __propDef: {
         menuOpened?: boolean | undefined;
         openingId?: string | undefined;
         width?: string | undefined;
+        minWidth?: string | undefined;
         disabled?: boolean | undefined;
         menuWidth?: string | undefined | null;
     };

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, maxYearInRange = 2100, minYearInRange = 1970, disabled = false;
+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, disabled = false, flipOnOverflow = true;
 let activator, refreshPosition = false, menuElement, inputElement, mask = {
   value: void 0
 }, maskFactoryArgs = {
@@ -211,6 +211,7 @@ $:
       bind:refreshPosition
       bind:menuElement
       bind:openingId={openingId}
+      flipOnOverflow={flipOnOverflow}
     >
       <div
         style:background-color="rgb(var(--global-color-background-100))"

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

@@ -21,6 +21,7 @@ declare const __propDef: {
         maxYearInRange?: number | undefined;
         minYearInRange?: number | undefined;
         disabled?: boolean | undefined;
+        flipOnOverflow?: boolean | undefined;
     };
     events: {
         'day-click': CustomEvent<{

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

@@ -6,7 +6,7 @@ import Button from "../../simple/buttons/Button.svelte";
 import Icon from "../../simple/media/Icon.svelte";
 import { createEventDispatcher } from "svelte";
 let dispatch = createEventDispatcher();
-export let items = [], values = [], multiple = false, lang = "en", searchText = void 0, maxVisibleChips = void 0, placeholder = lang == "en" ? "Select" : "Seleziona", clearable = true, mandatory = true, icon = void 0, menuOpened = false, openingId = void 0, width = void 0, mobileDrawer = false, disabled = false;
+export let items = [], values = [], multiple = false, lang = "en", searchText = void 0, maxVisibleChips = void 0, placeholder = lang == "en" ? "Select" : "Seleziona", clearable = true, mandatory = true, icon = void 0, menuOpened = false, openingId = void 0, width = void 0, minWidth = void 0, menuWidth = width, mobileDrawer = false, disabled = false;
 $:
   generatedLabel = values.length == 1 ? values[0].label : `${values.length} Selezionati`;
 function handleCloseClick(event) {
@@ -36,6 +36,8 @@ function handleCloseClick(event) {
   bind:openingId
   bind:width
   {mobileDrawer}
+  bind:minWidth
+  bind:menuWidth
 >
   <svelte:fragment slot="selection-container" let:openMenu let:handleKeyDown>
     <Button

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

@@ -16,6 +16,8 @@ declare const __propDef: {
         menuOpened?: boolean | undefined;
         openingId?: string | undefined;
         width?: string | undefined;
+        minWidth?: string | undefined;
+        menuWidth?: string | undefined;
         mobileDrawer?: boolean | undefined;
         disabled?: boolean | undefined;
     };

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

@@ -4,7 +4,7 @@
 import Icon from "../../simple/media/Icon.svelte";
 import { createEventDispatcher } from "svelte";
 let dispatch = createEventDispatcher();
-export let items = [], values = [], clearable = false, disabled = false;
+export let items = [], values = [], clearable = false, disabled = false, width = "auto", minWidth = "auto", menuWidth = "60px";
 let dropdownValues = [];
 $:
   dropdownValues = values.map((e) => ({
@@ -51,7 +51,9 @@ function handleChange(event) {
   bind:disabled
   bind:values={dropdownValues}
   on:change={handleChange}
-  width="60px"
+  {width}
+  {minWidth}
+  {menuWidth}
 >
   <svelte:fragment slot="label" let:generatedLabel let:values let:placeholder let:clearable let:handleCloseClick>
     {#if values.length == 0}

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

@@ -10,6 +10,9 @@ declare const __propDef: {
         values?: IconItem[] | undefined;
         clearable?: boolean | undefined;
         disabled?: boolean | undefined;
+        width?: string | undefined;
+        minWidth?: string | undefined;
+        menuWidth?: string | undefined;
     };
     events: {
         change: CustomEvent<{

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

@@ -124,6 +124,7 @@ $:
               bind:menuOpened={calendarOpened}
               on:day-click={() => {calendarOpened = false}}
               --simple-textfield-width="100%"
+              flipOnOverflow
             >
               <svelte:fragment slot="append-inner">
                 <Icon
@@ -202,6 +203,7 @@ $:
               bind:menuOpened={calendarOpened2}
               on:day-click={() => {calendarOpened2 = false}}
               --simple-textfield-width="100%"
+              flipOnOverflow
             >
               <svelte:fragment slot="append-inner">
                 <Icon

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

@@ -296,7 +296,7 @@ let moreItemsActivator;
 
 <MediaQuery let:mAndDown>
   <div class="filters-wrapper" class:mobile={mAndDown} style:--filter-dot-size={activeFilters.length > 0 ? '22px' : '0px'} style:--filter-dot-content={activeFilters.length > 0 ? `"${activeFilters.length}"` : '""'}>
-    <div class="filters-container" class:mobile={mAndDown}>
+    <div class="filters-container" class:mobile={mAndDown} class:hidden={mAndDown && (!showActiveFilters || activeFilters.length == 0)}>
       {#if showActiveFilters}
         {#each activeFilters as filter}
           <div
@@ -587,6 +587,7 @@ let moreItemsActivator;
         _borderRadius="5px"
         anchor="bottom"
         openingId="select-filter"
+        flipOnOverflow
       >
         <div
           style:background-color="rgb(var(--global-color-background-200))"
@@ -917,4 +918,8 @@ let moreItemsActivator;
     grid-column: span 2;
   }
 
+  .hidden {
+    display: none;
+  }
+
 </style>

package/dist/components/simple/common/Menu.svelte

@@ -59,9 +59,9 @@ function calculateMenuPosition(params) {
       }
     }
     if (flipOnOverflow && !!params.activator) {
-      if (window.innerHeight + window.scrollY < (_top || 0) + (menuElement?.offsetHeight || 0)) {
-        let { top: activatorTop } = params.activator.getBoundingClientRect();
-        _top = activatorTop + window.scrollY - _activatorGap - (menuElement?.offsetHeight || 0);
+      let { top: activatorTopDistance } = params.activator.getBoundingClientRect();
+      if (window.innerHeight < activatorTopDistance + (menuElement?.offsetHeight || 0) + (menuElement?.offsetHeight || 0) * 0.1) {
+        _top = getTopDistance(params.activator) - _activatorGap - (menuElement?.offsetHeight || 0);
       }
       if (anchor == "right-center" && window.innerWidth + window.scrollX < (_left || 0) + (menuElement?.offsetWidth || 0)) {
         let { left: activatorLeft } = params.activator.getBoundingClientRect();
@@ -94,8 +94,38 @@ function calculateMenuPosition(params) {
     }
   }
 }
+function getTopDistance(elem) {
+  let positionedAncestor2 = getPositionedAncestor(elem);
+  if (!!positionedAncestor2) {
+    let top = parseInt(getComputedStyle(positionedAncestor2).top);
+    return (isNaN(top) ? 0 : top) + elem.offsetTop - calcScrollY(elem);
+  }
+  return window.scrollY + elem.getBoundingClientRect().top;
+}
+function calcScrollY(elem) {
+  let parent = elem.parentElement;
+  let scroll = 0;
+  while (!!parent) {
+    scroll += parent.scrollTop;
+    let parentPosition = getComputedStyle(parent).position;
+    if (parentPosition === "absolute" || parentPosition === "fixed")
+      break;
+    parent = parent.parentElement;
+  }
+  return scroll;
+}
 $:
   if (open) {
+    if (!!activator) {
+      let parent = activator.parentElement;
+      while (!!parent) {
+        let parentPosition = getComputedStyle(parent).position;
+        parent.addEventListener("scroll", refreshMenuPosition);
+        if (parentPosition == "absolute" || parentPosition == "fixed")
+          break;
+        parent = parent.parentElement;
+      }
+    }
     if (!!openingId) {
       const controllers = document.querySelectorAll(`[data-operation="close"][data-opening-id="${openingId}"]`);
       for (let k = 0; k < controllers.length; k += 1) {
@@ -251,6 +281,7 @@ $:
 ></div>
 {#if open}
   <div
+    role="presentation"
     bind:this={menuElement}
     data-menu
     data-uid={currentUid}

package/dist/components/simple/media/Avatar.svelte

@@ -1,10 +1,22 @@
 <script>import "./Avatar.css";
 import "../../../css/main.css";
-export let src = void 0, alt = "", text = void 0, referrerpolicy = "no-referrer";
+import { BROWSER } from "esm-env";
+export let src = void 0, alt = "", text = void 0, referrerpolicy = "no-referrer", imageLoadingStatus = "success";
+$:
+  if (!!src && BROWSER) {
+    let image = new Image();
+    image.src = src;
+    image.onload = () => {
+      imageLoadingStatus = "success";
+    };
+    image.onerror = () => {
+      imageLoadingStatus = "error";
+    };
+  }
 </script>
 
 
-{#if !!src}
+{#if !!src && imageLoadingStatus == 'success'}
   <img
     class="avatar"
     {src}
@@ -12,7 +24,9 @@ export let src = void 0, alt = "", text = void 0, referrerpolicy = "no-referrer"
     {referrerpolicy}
   />
 {:else}
-  <div class="avatar">{text}</div>
+  <slot>
+    <div class="avatar">{text || ''}</div>
+  </slot>
 {/if}
 
 <style>

package/dist/components/simple/media/Avatar.svelte.d.ts

@@ -7,11 +7,14 @@ declare const __propDef: {
         alt?: string | undefined;
         text?: string | undefined;
         referrerpolicy?: ReferrerPolicy | null | undefined;
+        imageLoadingStatus?: "error" | "success" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
 export type AvatarProps = typeof __propDef.props;
 export type AvatarEvents = typeof __propDef.events;

package/dist/components/simple/media/DescriptiveAvatar.css

@@ -0,0 +1,6 @@
+:root {
+  --descriptive-avatar-default-image-gap: 8px;
+  --descriptive-avatar-default-text-gap: 2px;
+  --descriptive-avatar-default-font-size: 1.1rem;
+  --descriptive-avatar-default-cursor: pointer;
+}

package/dist/components/simple/media/DescriptiveAvatar.svelte

@@ -1,17 +1,45 @@
-<script>export let src, title = void 0, description = void 0, direction = "row", reverse = false, avatarSpacing = "10px", width = void 0, maxWidth = void 0, minWidth = void 0, height = void 0, maxHeight = void 0, minHeight = void 0, lazyLoaded = false, borderRadius = "50%", referrerpolicy = "no-referrer";
-let textAlignment;
-$:
-  if (direction == "column") {
-    textAlignment = "center";
-  } else if (reverse) {
-    textAlignment = "right";
-  } else {
-    textAlignment = "left";
-  }
+<script>import "./DescriptiveAvatar.css";
+import "../../../css/main.css";
 import Avatar from "./Avatar.svelte";
+export let src = void 0, title = void 0, subtitle = void 0, avatarText = !title ? void 0 : title.substring(0, 2).toUpperCase(), direction = "row", reverse = false, referrerpolicy = "no-referrer";
 </script>
 
-<div
+<div 
+  class="flex image-gapped items-center clickable"
+  class:flex-col={direction == 'column'}
+  class:flex-reverse={direction == 'row' && reverse}
+  class:flex-col-reverse={direction == 'column' && reverse}
+  role="presentation"
+  on:click
+>
+  <Avatar
+    {src}
+    {referrerpolicy}
+    bind:text={avatarText}
+  ></Avatar>
+  {#if !!title || !!subtitle}
+    <slot {title} {subtitle} {avatarText} {src}>
+      <div class="flex flex-col text-gapped">
+        {#if !!title}
+          <div 
+            class="font-bold title"
+            class:text-center={direction == 'column'}
+            class:text-end={direction == 'row' && reverse}
+          >{title}</div>
+        {/if}
+        {#if !!subtitle}
+          <div 
+            class="subtitle"
+            class:text-center={direction == 'column'}
+            class:text-end={direction == 'row' && reverse}
+          >{subtitle}</div>
+        {/if}
+      </div>
+    </slot>
+  {/if}
+</div>
+
+<!-- <div
   style:align-items="center"
   style:flex-direction={reverse ? direction + "-reverse" : direction}
   class="descriptive-avatar-container"
@@ -58,9 +86,9 @@ import Avatar from "./Avatar.svelte";
       </div>
     {/if}
   </div>
-</div>
+</div> -->
 
-<style>
+<!-- <style>
   .descriptive-avatar-container {
     width: fit-content;
     display: flex;
@@ -83,4 +111,66 @@ import Avatar from "./Avatar.svelte";
     font-size: 10pt;
     font-weight: 300;
   }
+</style> -->
+
+<style>
+  .flex {
+    display: flex;
+  }
+
+  .flex-col {
+    flex-direction: column;
+  }
+
+  .flex-reverse {
+    flex-direction: row-reverse;
+  }
+
+  .flex-col-reverse {
+    flex-direction: column-reverse;
+  }
+
+  .image-gapped {
+    gap: var(
+      --descriptive-avatar-image-gap,
+      var(--descriptive-avatar-default-image-gap)
+    )
+  }
+
+  .text-gapped {
+    gap: var(
+      --descriptive-avatar-text-gap,
+      var(--descriptive-avatar-default-text-gap)
+    )
+  }
+
+  .font-bold {
+    font-weight: bold;
+  }
+
+  .items-center {
+    align-items: center;
+  }
+
+  .text-center {
+    text-align: center;
+  }
+
+  .text-end {
+    text-align: end;
+  }
+
+  .title {
+    font-size: var(
+      --descriptive-avatar-font-size,
+      var(--descriptive-avatar-default-font-size)
+    )
+  }
+
+  .clickable {
+    cursor: var(
+      --descriptive-avatar-cursor,
+      var(--descriptive-avatar-default-cursor)
+    );
+  }
 </style>

package/dist/components/simple/media/DescriptiveAvatar.svelte.d.ts

@@ -1,30 +1,28 @@
 import { SvelteComponent } from "svelte";
+import './DescriptiveAvatar.css';
+import '../../../css/main.css';
 declare const __propDef: {
     props: {
-        src: string;
+        src?: string | undefined;
         title?: string | undefined;
-        description?: string | undefined;
+        subtitle?: string | undefined;
+        avatarText?: string | undefined;
         direction?: "row" | "column" | undefined;
         reverse?: boolean | undefined;
-        avatarSpacing?: string | undefined;
-        width?: string | undefined;
-        maxWidth?: string | undefined;
-        minWidth?: string | undefined;
-        height?: string | undefined;
-        maxHeight?: string | undefined;
-        minHeight?: string | undefined;
-        lazyLoaded?: boolean | undefined;
-        borderRadius?: string | undefined;
         referrerpolicy?: ReferrerPolicy | null | undefined;
     };
     events: {
         click: MouseEvent;
-        keypress: KeyboardEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        avatar: {};
+        default: {
+            title: string | undefined;
+            subtitle: string | undefined;
+            avatarText: string | undefined;
+            src: string | undefined;
+        };
     };
 };
 export type DescriptiveAvatarProps = typeof __propDef.props;

package/package.json

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