@likable-hair/svelte 3.1.24 → 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/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/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.24",
+  "version": "3.1.25",
   "scripts": {
     "host": "vite --host",
     "dev": "vite dev",