@likable-hair/svelte 3.0.79 → 3.0.81

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

@@ -0,0 +1,199 @@
+<script context="module"></script>
+
+<script>import lodash from "lodash";
+import Autocomplete from "../../../components/simple/forms/Autocomplete.svelte";
+import Button from "../../simple/buttons/Button.svelte";
+import Icon from "../../simple/media/Icon.svelte";
+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, lang = "en", searchText = void 0, maxVisibleChips = void 0, placeholder = lang == "en" ? "Select" : "Seleziona", clearable = true, mandatory = true, menuOpened = false, openingId = void 0, width = void 0;
+function handleCloseClick(event) {
+  event.preventDefault();
+  event.stopPropagation();
+  let valuesBefore = lodash.cloneDeep(values);
+  values = [];
+  dispatch("change", {
+    unselect: valuesBefore[0],
+    select: void 0,
+    selection: []
+  });
+}
+$:
+  autocompleteItems = items.map((e) => {
+    return {
+      ...e,
+      label: e.label || e.text,
+      data: {
+        ...e.data || {},
+        text: e.text,
+        src: e.src,
+        alt: e.alt
+      }
+    };
+  });
+let tooltipsActivator = [];
+</script>
+
+<Autocomplete
+  bind:items={autocompleteItems}
+  bind:values
+  bind:searchText
+  bind:multiple
+  bind:maxVisibleChips
+  bind:mandatory
+  searchFunction={() => true}
+  on:change
+  bind:menuOpened
+  bind:openingId
+  bind:width
+  menuWidth="144px"
+>
+  <svelte:fragment slot="selection-container" let:openMenu let:handleKeyDown>
+    <button
+      class="unstyled-button"
+      on:click={openMenu}
+      on:keydown={(event) => {
+        handleKeyDown(event)
+        if(event.key == 'ArrowDown' || event.key == 'ArrowUp') {
+          event.stopPropagation()
+          event.preventDefault()
+        }
+      }}
+    >
+      <slot 
+        name="label" 
+        {values} 
+        {items} 
+        {searchText} 
+        {placeholder} 
+        {clearable} 
+        {handleCloseClick}
+      >
+        {#if values.length > 0}
+          <div class="overlapped-avatars">
+            {#each values as avatar, i}
+              {#if !!avatar.tooltip || !!avatar.label }
+                <ToolTip activator={tooltipsActivator[i]} appearTimeout={500}>
+                  <div class="tooltip">{avatar.tooltip || avatar.label}</div>
+                </ToolTip>
+              {/if}
+              <div class="single-avatar" bind:this={tooltipsActivator[i]}>
+                <Avatar 
+                  text={avatar.text}
+                  alt={avatar.alt}
+                  src={avatar.src}
+                  --avatar-default-border="2px solid rgb(var(--global-color-background-100))"
+                ></Avatar>
+                <button 
+                  on:click|stopPropagation={() => {
+                    values.splice(i, 1)
+                    values = [...values]
+                  }}
+                  class="unstyled-button remove-button"
+                >
+                  <Icon --icon-default-size="10px" name="mdi-close"></Icon>
+                </button>
+              </div>
+            {/each}
+          </div>
+        {:else}
+          <slot 
+            name="no-values"
+            {values} 
+            {items} 
+            {searchText} 
+            {placeholder} 
+            {clearable} 
+            {handleCloseClick}
+          >
+            <Icon name="mdi-account-plus"></Icon>
+          </slot>
+        {/if}
+      </slot>
+    </button>
+  </svelte:fragment>
+  <svelte:fragment slot="item-label" let:item >
+    <slot name="item-label" {item}>
+      <div class="item-label-container">
+        <Avatar 
+          text={item.data.text}
+          alt={item.data.alt}
+          src={item.data.src}
+          --avatar-default-border="2px solid rgb(var(--global-color-background-100))"
+        ></Avatar>
+        {item.label}
+      </div>
+    </slot>
+  </svelte:fragment>
+</Autocomplete>
+
+<style>
+  .unstyled-button {
+    background-color: transparent;
+    outline: inherit;
+    background-image: none;
+    text-transform: none;
+    line-height: inherit;
+    color: inherit;
+    border: none;
+    padding: 0;
+    font: inherit;
+    cursor: pointer;
+  }
+
+  .overlapped-avatars {
+    display: flex;
+    flex-direction: row-reverse;
+  }
+
+  .single-avatar {
+    position: relative
+  }
+
+  .single-avatar {
+    position: relative;
+  }
+
+  .remove-button {
+    position: absolute;
+    display: none;
+    top: 0px;
+    right: 0px;
+    height: 14px;
+    width: 14px;
+    border-radius: 9999px;
+    line-height: 12px;
+    font-size: 10px;
+  }
+
+  .remove-button:hover {
+    display: flex;
+  }
+
+  .single-avatar:hover .remove-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 5;
+    background-color: rgb(var(--global-color-error-500));
+    border: 1px solid rgb(var(--global-color-background-100));
+  }
+
+  .single-avatar:not(:first-child) {
+    margin-right: -12px;
+  }
+
+  .tooltip {
+    background-color: rgb(var(--global-color-background-200));
+    padding: 4px 8px;
+    border-radius: 8px;
+  }
+
+  .item-label-container {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+</style>

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

@@ -0,0 +1,58 @@
+import { SvelteComponentTyped } from "svelte";
+export type AvatarItem = {
+    value: string | number;
+    tooltip?: string | number;
+    label?: string | number;
+    text?: string;
+    src?: string;
+    alt?: string;
+    data?: any;
+};
+declare const __propDef: {
+    props: {
+        items?: AvatarItem[] | undefined;
+        values?: AvatarItem[] | undefined;
+        multiple?: boolean | undefined;
+        lang?: "it" | "en" | undefined;
+        searchText?: string | undefined;
+        maxVisibleChips?: number | undefined;
+        placeholder?: string | undefined;
+        clearable?: boolean | undefined;
+        mandatory?: boolean | undefined;
+        menuOpened?: boolean | undefined;
+        openingId?: string | undefined;
+        width?: string | undefined;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        label: {
+            values: AvatarItem[];
+            items: AvatarItem[];
+            searchText: string | undefined;
+            placeholder: string;
+            clearable: boolean;
+            handleCloseClick: (event: MouseEvent) => void;
+        };
+        'no-values': {
+            values: AvatarItem[];
+            items: AvatarItem[];
+            searchText: string | undefined;
+            placeholder: string;
+            clearable: boolean;
+            handleCloseClick: (event: MouseEvent) => void;
+        };
+        'item-label': {
+            item: import("../../../components/simple/forms/Autocomplete.svelte").Item;
+        };
+    };
+};
+export type AvatarDropdownProps = typeof __propDef.props;
+export type AvatarDropdownEvents = typeof __propDef.events;
+export type AvatarDropdownSlots = typeof __propDef.slots;
+export default class AvatarDropdown extends SvelteComponentTyped<AvatarDropdownProps, AvatarDropdownEvents, AvatarDropdownSlots> {
+}
+export {};

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

@@ -36,6 +36,7 @@ declare const __propDef: {
             menuBoxShadow?: string | undefined;
             menuBorderRadius?: string | undefined;
             mobileDrawer?: boolean | undefined;
+            menuWidth?: string | undefined;
         }, "items"> | undefined;
         selected?: Item[] | undefined;
     };

package/dist/components/composed/forms/{YearPicketTextfield.svelte.d.ts → YearPickerTextField.svelte.d.ts}

@@ -9,12 +9,7 @@ declare const __propDef: {
         } | undefined;
         menuOpened?: boolean | undefined;
         openingId?: string | undefined;
-        pattern?: string | undefined;
-        selectedMonth?: number | undefined;
         selectedYear?: number | undefined;
-        visibleMonth?: number | undefined;
-        visibleYear?: number | undefined;
-        selectedDate?: Date | undefined;
         placeholder?: string | undefined;
         mobileDialog?: boolean | undefined;
         maxYearInRange?: number | undefined;
@@ -25,7 +20,7 @@ declare const __propDef: {
             year: number;
         }>;
         input: CustomEvent<{
-            datetime: Date | undefined;
+            year: number | undefined;
         }>;
     } & {
         [evt: string]: CustomEvent<any>;
@@ -50,9 +45,9 @@ declare const __propDef: {
         };
     };
 };
-export type YearPicketTextfieldProps = typeof __propDef.props;
-export type YearPicketTextfieldEvents = typeof __propDef.events;
-export type YearPicketTextfieldSlots = typeof __propDef.slots;
-export default class YearPicketTextfield extends SvelteComponentTyped<YearPicketTextfieldProps, YearPicketTextfieldEvents, YearPicketTextfieldSlots> {
+export type YearPickerTextFieldProps = typeof __propDef.props;
+export type YearPickerTextFieldEvents = typeof __propDef.events;
+export type YearPickerTextFieldSlots = typeof __propDef.slots;
+export default class YearPickerTextField extends SvelteComponentTyped<YearPickerTextFieldProps, YearPickerTextFieldEvents, YearPickerTextFieldSlots> {
 }
 export {};

package/dist/components/composed/forms/{YearPicketTextfield.svelte → YearPickerTextfield.svelte}

@@ -8,11 +8,12 @@ import { DateTime } from "luxon";
 import { createEventDispatcher } from "svelte";
 import MediaQuery from "../../simple/common/MediaQuery.svelte";
 import Dialog from "../../simple/dialogs/Dialog.svelte";
+import YearSelector from "../../simple/dates/YearSelector.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;
-let activator, refreshPosition = false, menuElement, inputElement, mask = {
+export let menuOpened = false, openingId = "year-picker-text-field", selectedYear = void 0, placeholder = void 0, mobileDialog = true, maxYearInRange = 2100, minYearInRange = 1900;
+let activator, refreshPosition = false, menuElement, inputElement, pattern = "yyyy", mask = {
   value: void 0
 }, maskFactoryArgs = {
   mask: Date,
@@ -28,26 +29,6 @@ let activator, refreshPosition = false, menuElement, inputElement, mask = {
       mask: IMask.MaskedRange,
       from: minYearInRange,
       to: maxYearInRange
-    },
-    MM: {
-      mask: IMask.MaskedRange,
-      from: 1,
-      to: 12
-    },
-    dd: {
-      mask: IMask.MaskedRange,
-      from: 1,
-      to: 31
-    },
-    HH: {
-      mask: IMask.MaskedRange,
-      from: 0,
-      to: 23
-    },
-    mm: {
-      mask: IMask.MaskedRange,
-      from: 0,
-      to: 59
     }
   }
 };
@@ -61,62 +42,38 @@ onMount(() => {
     inputElement,
     maskFactoryArgs
   );
-  if (!!selectedDate) {
-    mask.value = DateTime.fromJSDate(selectedDate).toFormat(pattern);
+  if (selectedYear !== void 0) {
+    mask.value = selectedYear.toString();
   }
 });
 function handleInputChange(event) {
   setTimeout(() => {
     const typedValue = mask.value;
     if (typedValue !== void 0 && typedValue !== null) {
-      const dayOfMonthIndex = pattern.indexOf("dd");
-      const dayOfMonth = typedValue.substring(dayOfMonthIndex, dayOfMonthIndex + 2);
-      const monthIndex = pattern.indexOf("MM");
-      const oneBasedMonth = typedValue.substring(monthIndex, monthIndex + 2);
-      if (oneBasedMonth.length == 2) {
-        selectedMonth = Number(oneBasedMonth) - 1;
-        visibleMonth = selectedMonth;
-      }
       const yearIndex = pattern.indexOf("yyyy");
       const year = typedValue.substring(yearIndex, yearIndex + 4);
       if (year.length == 4) {
         selectedYear = Number(year);
-        visibleYear = selectedYear;
-      }
-      if (typedValue.length == pattern.length) {
-        selectedDate = DateTime.fromObject({
-          day: Number(dayOfMonth),
-          month: Number(oneBasedMonth),
-          year: Number(year)
-        }).toJSDate();
-      } else {
-        selectedDate = void 0;
       }
       dispatch("input", {
-        datetime: selectedDate
+        year: selectedYear
       });
     }
   }, 30);
 }
-function handleDateSelect(ev) {
-  if (!!selectedDate) {
-    mask.value = DateTime.fromJSDate(selectedDate).toFormat(pattern);
+function handleYearSelect(ev) {
+  if (!!selectedYear) {
+    mask.value = selectedYear.toString();
   }
-  dispatch("day-click", {
-    dateStat: ev.detail.dateStat
+  dispatch("year-click", {
+    year: ev.detail.year
   });
 }
-function handleYearSelect() {
-  mask.value = "";
-}
-function handleMonthSelect() {
-  mask.value = "";
-}
 $:
-  if (!!selectedDate) {
+  if (!!selectedYear) {
     setTimeout(() => {
-      if (!!selectedDate) {
-        mask.value = DateTime.fromJSDate(selectedDate).toFormat(pattern);
+      if (!!selectedYear) {
+        mask.value = selectedYear.toString();
       }
     }, 30);
   }
@@ -177,16 +134,10 @@ $:
         style:width="300px"
         style:border-radius="10px"
       >
-        <DatePicker
-          bind:selectedDate={selectedDate}
-          bind:selectedMonth={selectedMonth}
+        <YearSelector
           bind:selectedYear={selectedYear}
-          bind:visibleMonth
-          bind:visibleYear
-          on:day-click={handleDateSelect}
-          on:year-click={handleYearSelect}
-          on:month-click={handleMonthSelect}
-        ></DatePicker>
+          on:click={handleYearSelect}
+        ></YearSelector>
       </div>
     </Dialog>
   {:else}
@@ -205,16 +156,10 @@ $:
       <div
         style:background-color="rgb(var(--global-color-background-100))"
       >
-        <DatePicker
-          bind:selectedDate={selectedDate}
-          bind:selectedMonth={selectedMonth}
+        <YearSelector
           bind:selectedYear={selectedYear}
-          bind:visibleMonth
-          bind:visibleYear
-          on:day-click={handleDateSelect}
-          on:year-click={handleYearSelect}
-          on:month-click={handleMonthSelect}
-        ></DatePicker>
+          on:click={handleYearSelect}
+        ></YearSelector>
       </div>
     </Menu>
   {/if}

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, closeOnSelect = !multiple, emptySearchTextOnMenuClose = true, 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 = !multiple, emptySearchTextOnMenuClose = true, menuBoxShadow = "rgb(var(--global-color-background-300), .5) 0px 2px 4px", menuBorderRadius = "5px", mobileDrawer = false, menuWidth = void 0;
 let dispatch = createEventDispatcher();
 function select(item) {
   const alreadyPresent = values.findIndex((i) => i.value === item.value) != -1;
@@ -54,18 +54,21 @@ function toggle(item) {
   else
     select(item);
 }
-let menuWidth = void 0, menuHeight = "auto", refreshPosition = false;
+let localMenuWidth = void 0, menuHeight = "auto", refreshPosition = false;
 function openMenu() {
   refreshMenuWidth();
   menuOpened = true;
 }
 function refreshMenuWidth() {
   setTimeout(() => {
-    menuWidth = activator.offsetWidth + "px";
+    if (menuWidth !== void 0)
+      localMenuWidth = menuWidth;
+    else
+      localMenuWidth = activator.offsetWidth + "px";
     setTimeout(() => {
       refreshPosition = true;
-    }, 1);
-  }, 1);
+    }, 3);
+  }, 3);
 }
 let activator, focusedIndex = void 0;
 function handleTextFieldFocus() {
@@ -152,6 +155,8 @@ import MenuOrDrawer from "../../composed/common/MenuOrDrawer.svelte";
   on:click={handleContainerClick}
   on:keypress={handleContainerClick}
   class={clazz.activator || ''}
+  role="button"
+  tabindex="0"
 >
   <slot name="selection-container" {values} {searchText} {disabled} {openMenu} {handleKeyDown}>
     <div
@@ -207,7 +212,7 @@ import MenuOrDrawer from "../../composed/common/MenuOrDrawer.svelte";
   {#if !mobileDrawer}
     <Menu
       {activator}
-      _width={menuWidth || ""}
+      _width={localMenuWidth || ""}
       _height={menuHeight}
       _maxHeight="300px"
       _boxShadow={menuBoxShadow}
@@ -242,6 +247,8 @@ import MenuOrDrawer from "../../composed/common/MenuOrDrawer.svelte";
                 }) != -1}
                 on:click={() => toggle(item)}
                 on:keypress={() => toggle(item)}
+                role="button"
+                tabindex="0"
               >
                 <slot name="item-label" {item}>
                   {item.label}
@@ -255,7 +262,7 @@ import MenuOrDrawer from "../../composed/common/MenuOrDrawer.svelte";
   {:else}
     <MenuOrDrawer
       {activator}
-      _width={menuWidth || ""}
+      _width={localMenuWidth || ""}
       _height={menuHeight}
       _maxHeight="300px"
       _boxShadow={menuBoxShadow}
@@ -285,6 +292,8 @@ import MenuOrDrawer from "../../composed/common/MenuOrDrawer.svelte";
                 }) != -1}
                 on:click={() => toggle(item)}
                 on:keypress={() => toggle(item)}
+                role="button"
+                tabindex="0"
               >
                 <slot name="item-label" {item}>
                   {item.label}

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

@@ -34,6 +34,7 @@ declare const __propDef: {
         menuBoxShadow?: string | undefined;
         menuBorderRadius?: string | undefined;
         mobileDrawer?: boolean | undefined;
+        menuWidth?: string | undefined;
     };
     events: {
         focus: FocusEvent;

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

@@ -21,13 +21,11 @@ function initSortable() {
     ghostClass: "ghost-drag-element",
     onEnd(ev) {
       dispatch("end", { ev });
-      console.log("internal END");
     },
     onChange(ev) {
       dispatch("change", { ev });
     },
     onUpdate(ev) {
-      console.log("internal Update");
     }
   });
 }
@@ -76,8 +74,8 @@ function doUpdateItem(item, inputData) {
         </Button>
       </div>
     {/if}
-    {#if editable}
-      <slot name="title" item={currentItem} {doUpdateItem}>
+    <slot name="title" item={currentItem} {doUpdateItem}>
+      {#if editable}
         <input 
           bind:value={title}
           on:input|stopPropagation={(e) => {
@@ -86,10 +84,10 @@ function doUpdateItem(item, inputData) {
             })
           }}
         />
-      </slot>
-    {:else}
-      {title}
-    {/if}
+      {:else}
+        {title}
+      {/if}
+    </slot>
     {#if !!$$slots.append}
       <div style:margin-left="auto">
         <slot name="append" item={currentItem} {doUpdateItem}>

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

@@ -0,0 +1,8 @@
+:root {
+  --avatar-default-width: 40px;
+  --avatar-default-height: 40px;
+  --avatar-default-border-radius: 9999px;
+  --avatar-default-background-color: rgb(var(--global-color-primary-500));
+  --avatar-default-text-color: rgb(var(--global-color-grey-50));
+  --avatar-default-text-weight: 700;
+}

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

@@ -1,32 +1,81 @@
-<script>export let src, alt = "", width = "40px", maxWidth = void 0, minWidth = void 0, height = "40px", maxHeight = void 0, minHeight = void 0, lazyLoaded = false, referrerpolicy = "no-referrer", borderRadius = "50%";
-import Image from "./Image.svelte";
+<script>import "./Avatar.css";
+import "../../../css/main.css";
+export let src = void 0, alt = "", text = void 0, referrerpolicy = "no-referrer";
 </script>
 
-{#if lazyLoaded}
-  <Image
-    {src}
-    {width}
-    {maxWidth}
-    {minWidth}
-    {height}
-    {maxHeight}
-    {minHeight}
-    {borderRadius}
-    disableHover={true}
-    showSkeletonLoader={true}
-  />
-{:else}
+
+{#if !!src}
   <img
+    class="avatar"
     {src}
     {alt}
-    style:width
-    style:max-width={maxWidth}
-    style:min-width={minWidth}
-    style:height
-    style:max-height={maxHeight}
-    style:min-height={minHeight}
-    style:border-radius={borderRadius}
-    style:object-fit="cover"
     {referrerpolicy}
   />
+{:else}
+  <div class="avatar">{text}</div>
 {/if}
+
+<style>
+  .avatar {
+    width: var(
+      --avatar-width,
+      var(--avatar-default-width)
+    );
+    height: var(
+      --avatar-height,
+      var(--avatar-default-height)
+    );
+    min-width: var(--avatar-min-width);
+    max-width: var(--avatar-max-width);
+    height: var(
+      --avatar-height,
+      var(--avatar-default-height)
+    );
+    min-height: var(--avatar-min-height);
+    max-height: var(--avatar-max-height);
+    border-radius: var(
+      --avatar-border-radius,
+      var(--avatar-default-border-radius)
+    );
+    border: var(
+      --avatar-border,
+      var(--avatar-default-border)
+    )
+  }
+
+  img {
+    object-fit: cover;
+  }
+
+  div {
+    background-color: var(
+      --avatar-background-color,
+      var(--avatar-default-background-color)
+    );
+    color: var(
+      --avatar-text-color,
+      var(--avatar-default-text-color)
+    );
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: var(
+      --avatar-text-size,
+      calc(
+        var(
+          --avatar-height,
+          var(--avatar-default-height)
+        ) - calc(
+          var(
+            --avatar-height,
+            var(--avatar-default-height)
+          ) / 1.7
+        )
+      )
+    );
+    font-weight: var(
+      --avatar-text-weight,
+      var(--avatar-default-text-weight)
+    );
+  }
+</style>

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

@@ -1,17 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
+import './Avatar.css';
+import '../../../css/main.css';
 declare const __propDef: {
     props: {
-        src: string;
+        src?: string | undefined;
         alt?: string | undefined;
-        width?: string | undefined;
-        maxWidth?: string | undefined;
-        minWidth?: string | undefined;
-        height?: string | undefined;
-        maxHeight?: string | undefined;
-        minHeight?: string | undefined;
-        lazyLoaded?: boolean | undefined;
+        text?: string | undefined;
         referrerpolicy?: ReferrerPolicy | null | undefined;
-        borderRadius?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/index.d.ts

@@ -11,6 +11,7 @@ export { default as MonthSelector } from './components/simple/dates/MonthSelecto
 export { default as TimePickerTextField } from './components/simple/dates/TimePickerTextField.svelte';
 export { default as DatePickerTextField } from './components/composed/forms/DatePickerTextField.svelte';
 export { default as YearSelector } from './components/simple/dates/YearSelector.svelte';
+export { default as YearPickerTextField } from './components/composed/forms/YearPickerTextField.svelte';
 export { default as Dialog } from './components/simple/dialogs/Dialog.svelte';
 export { default as Autocomplete } from './components/simple/forms/Autocomplete.svelte';
 export { default as Checkbox } from './components/simple/forms/Checkbox.svelte';
@@ -52,6 +53,7 @@ export { default as ProductsGrid } from './components/composed/shop/ProductsGrid
 export { default as HorizontalStackedProgress } from './components/composed/progress/HorizontalStackedProgress.svelte';
 export { default as ActivableButton } from './components/composed/buttons/ActivableButton.svelte';
 export { default as IconsDropdown } from './components/composed/forms/IconsDropdown.svelte';
+export { default as AvatarDropdown } from './components/composed/forms/AvatarDropdown.svelte';
 export { default as PaginatedTable } from './components/composed/list/PaginatedTable.svelte';
 export { default as Filters } from './components/composed/search/Filters.svelte';
 export { default as GlobalSearchTextField } from './components/composed/search/GlobalSearchTextField.svelte';

package/dist/index.js

@@ -11,6 +11,7 @@ export { default as MonthSelector } from './components/simple/dates/MonthSelecto
 export { default as TimePickerTextField } from './components/simple/dates/TimePickerTextField.svelte';
 export { default as DatePickerTextField } from './components/composed/forms/DatePickerTextField.svelte';
 export { default as YearSelector } from './components/simple/dates/YearSelector.svelte';
+export { default as YearPickerTextField } from './components/composed/forms/YearPickerTextField.svelte';
 export { default as Dialog } from './components/simple/dialogs/Dialog.svelte';
 export { default as Autocomplete } from './components/simple/forms/Autocomplete.svelte';
 export { default as Checkbox } from './components/simple/forms/Checkbox.svelte';
@@ -52,6 +53,7 @@ export { default as ProductsGrid } from './components/composed/shop/ProductsGrid
 export { default as HorizontalStackedProgress } from './components/composed/progress/HorizontalStackedProgress.svelte';
 export { default as ActivableButton } from './components/composed/buttons/ActivableButton.svelte';
 export { default as IconsDropdown } from './components/composed/forms/IconsDropdown.svelte';
+export { default as AvatarDropdown } from './components/composed/forms/AvatarDropdown.svelte';
 export { default as PaginatedTable } from './components/composed/list/PaginatedTable.svelte';
 export { default as Filters } from './components/composed/search/Filters.svelte';
 export { default as GlobalSearchTextField } from './components/composed/search/GlobalSearchTextField.svelte';

package/package.json

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