@likable-hair/svelte 2.0.4 → 2.0.6

package/dist/components/layouts/CollapsibleSideBarLayout.svelte

@@ -0,0 +1,316 @@
+<script>import { createEventDispatcher } from "svelte";
+import CollapsibleDivider from "../simple/common/CollapsibleDivider.svelte";
+import Icon from "../simple/media/Icon.svelte";
+import MediaQuery from "../simple/common/MediaQuery.svelte";
+export let _pagePadding = "20px 0 0 30px", _menuElementMarginBottom = "30px", _menuElementFontSize = "1.1rem", _menuElementFontWeight = "400", _menuColor = "#454444", _selectedMenuColor = "#0b66cc", _expandedSideBarWidth = "16rem", _collapsedSideBarWidth = "4.6rem", _headerHeight = "80px", _collapseTransitionTime = "0.4s", _sideBarBackgroundColor = "white", _overlayColor = "hsla(240,5%,65%,.2)", _headerBackgroundColor = "#FFFF";
+export let drawerOpened = false, drawerCollapsed = false, menuElements = [], menuIconsSize = 16, selectedMenuElementId = void 0, fullLogo = void 0, partialLogo = void 0;
+let dispatch = createEventDispatcher();
+function toggleMenu() {
+  drawerOpened = !drawerOpened;
+  dispatch("drawer-change", { opened: drawerOpened });
+}
+function toggleExpansion() {
+  drawerCollapsed = !drawerCollapsed;
+}
+function handleMenuClick(menu) {
+  selectedMenuElementId = menu.id;
+  dispatch("menu-click", { menu });
+}
+function handleOverlayClick() {
+}
+$:
+  if (drawerOpened)
+    drawerCollapsed = false;
+</script>
+
+<MediaQuery let:mAndDown>
+  <div
+    style:--collapsible-side-bar-layout-expanded-width={_expandedSideBarWidth}
+    style:--collapsible-side-bar-layout-header-height={_headerHeight}
+    style:--collapsible-side-bar-layout-collapsed-width={_collapsedSideBarWidth}
+    style:--collapsible-side-bar-layout-collapse-transition-time={_collapseTransitionTime}
+    style:--collapsible-side-bar-layout-menu-element-margin-bottom={_menuElementMarginBottom}
+    style:--collapsible-side-bar-layout-menu-element-font-size={_menuElementFontSize}
+    style:--collapsible-side-bar-layout-menu-element-font-weight={_menuElementFontWeight}
+    style:--collapsible-side-bar-layout-menu-color={_menuColor}
+    style:--collapsible-side-bar-layout-selected-menu-color={_selectedMenuColor}
+    style:--collapsible-side-bar-layout-sidebar-background-color={_sideBarBackgroundColor}
+    style:--collapsible-side-bar-layout-overlay-color={_overlayColor}
+    style:--collapsible-side-bar-layout-header-background-color={_headerBackgroundColor}
+  >
+    <header
+      class="side-bar"
+      class:collapsed={drawerCollapsed}
+      class:opened={drawerOpened}
+    >
+      <div
+        class="header-toolbar"
+        class:collapsed={drawerCollapsed}
+        class:opened={drawerOpened}
+      >
+        <slot name="menu">
+          <div class="inner-menu">
+            {#if mAndDown}
+              <div style:margin-right="2rem">
+                <Icon
+                  name="mdi-menu"
+                  click
+                  on:click={toggleMenu}
+                ></Icon>
+              </div>
+            {/if}
+            <slot name="inner-menu" hamburgerVisible={mAndDown}>
+              Menu
+            </slot>
+          </div>
+        </slot>
+      </div>
+      <div
+        class="side-bar-content"
+        class:collapsed={drawerCollapsed}
+      >
+        <slot name="sidebar-header" hamburgerVisible={mAndDown} collapsed={drawerCollapsed}>
+          {#if !!fullLogo && !!partialLogo && !mAndDown}
+            <div class="logo-container" class:collapsed={drawerCollapsed}>
+              <img src={drawerCollapsed ? partialLogo : fullLogo} alt="logo">
+            </div>
+          {/if}
+        </slot>
+        <slot name="sidebar-main" hamburgerVisible={mAndDown} collapsed={drawerCollapsed}>
+          <div
+            class="menu-container"
+            class:collapsed={drawerCollapsed}
+          >
+            <div
+              class="menu"
+              class:collapsed={drawerCollapsed}
+            >
+              {#each menuElements as menu}
+                <div
+                  class="menu-row"
+                  class:selected={menu.id === selectedMenuElementId}
+                  on:click={() => handleMenuClick(menu)}
+                  on:keypress
+                >
+                  <div class="menu-icon"><Icon name={menu.icon} size={menuIconsSize}></Icon></div>
+                  <div class="menu-name">{menu.name}</div>
+                </div>
+              {/each}
+            </div>
+          </div>
+        </slot>
+        <CollapsibleDivider
+          bind:collapsed={drawerCollapsed}
+          disabled={mAndDown}
+        ></CollapsibleDivider>
+        <slot name="sidebar-footer" hamburgerVisible={mAndDown} collapsed={drawerCollapsed}></slot>
+      </div>
+    </header>
+    <div
+      class="main-section"
+      class:collapsed={drawerCollapsed}
+    >
+      <div
+        class="overlay"
+        on:click={handleOverlayClick}
+        on:keypress={handleOverlayClick}
+        class:visible={drawerOpened}
+      ></div>
+      <div
+        style:padding={_pagePadding}
+        class:blurred={drawerOpened}
+      >
+        <slot>Content</slot>
+      </div>
+    </div>
+  </div>
+</MediaQuery>
+
+
+<style>
+
+  .logo-container {
+    padding-left: 16px;
+    padding-top: 10px;
+    transition-property: width padding-left;
+    transition-timing-function: cubic-bezier(.4,0,.2,1);
+    transition-duration: var(--collapsible-side-bar-layout-collapse-transition-time);
+  }
+
+  .logo-container.collapsed {
+    padding-left: 8px;
+  }
+
+  .logo-container img {
+    height: calc(var(--collapsible-side-bar-layout-collapsed-width) - 20px);
+  }
+
+  .side-bar {
+    padding-left: 5px;
+    padding-top: 5px;
+    position: fixed;
+    width: var(--collapsible-side-bar-layout-expanded-width);
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    transition-property: width padding-left;
+    transition-timing-function: cubic-bezier(.4,0,.2,1);
+    transition-duration: var(--collapsible-side-bar-layout-collapse-transition-time);
+    overflow: hidden;
+    white-space: nowrap;
+    background-color: var(--collapsible-side-bar-layout-sidebar-background-color);
+  }
+
+  .side-bar.collapsed {
+    width: var(--collapsible-side-bar-layout-collapsed-width);
+  }
+
+  .header-toolbar {
+    padding-right: 20px;
+    position: fixed;
+    height: var(--collapsible-side-bar-layout-header-height);
+    left: calc(5px + var(--collapsible-side-bar-layout-expanded-width));
+    transition-property: left;
+    transition-timing-function: cubic-bezier(.4,0,.2,1);
+    transition-duration: var(--collapsible-side-bar-layout-collapse-transition-time);
+    right: 0;
+    top: 0;
+  }
+
+  .header-toolbar.collapsed {
+    left: calc(5px + var(--collapsible-side-bar-layout-collapsed-width));
+  }
+
+  .main-section {
+    padding-left: var(--collapsible-side-bar-layout-expanded-width);
+    padding-top: var(--collapsible-side-bar-layout-header-height);
+    transition-property: padding-left;
+    transition-timing-function: cubic-bezier(.4,0,.2,1);
+    transition-duration: var(--collapsible-side-bar-layout-collapse-transition-time);
+  }
+
+  .main-section.collapsed {
+    padding-left: var(--collapsible-side-bar-layout-collapsed-width);
+  }
+
+  .menu {
+    width: auto;
+    margin-top: 40px;
+    margin-bottom: 20px;
+  }
+
+  .menu-container {
+    padding-left: 30px;
+    padding-right: 30px;
+    transition-property: padding-left padding-right;
+    transition-timing-function: cubic-bezier(.4,0,.2,1);
+    transition-duration: var(--collapsible-side-bar-layout-collapse-transition-time);
+  }
+
+  .menu-container.collapsed {
+    padding-left: 22px;
+    padding-right: 14px;
+  }
+
+  .menu .menu-name {
+    transition-property: opacity width;
+    transition-timing-function: cubic-bezier(.4,0,.2,1);
+    transition-duration: var(--collapsible-side-bar-layout-collapse-transition-time);
+    padding-left: 20px;
+    width: 100%;
+    font-size: var(--collapsible-side-bar-layout-menu-element-font-size);
+    font-weight: var(--collapsible-side-bar-layout-menu-element-font-weight);
+  }
+
+  .menu-icon {
+    display: flex;
+    justify-content: center;
+    margin-left: 0;
+  }
+
+  .menu.collapsed .menu-name {
+    width: 0px;
+    padding-left: 0px;
+    opacity: 0;
+  }
+
+  .menu-row {
+    display: flex;
+    margin-bottom: var(--collapsible-side-bar-layout-menu-element-margin-bottom);
+    cursor: pointer;
+    color: var(--collapsible-side-bar-layout-menu-color)
+  }
+
+  .menu-row.selected {
+    color: var(--collapsible-side-bar-layout-selected-menu-color);
+  }
+
+  .inner-menu {
+    padding-left: 20px;
+    background-color: var(--collapsible-side-bar-layout-header-background-color);
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  @media (max-width: 1024px) {
+    .side-bar {
+      left: calc(0rem - var(--collapsible-side-bar-layout-expanded-width));
+      right: auto;
+      transition-property: left;
+      transition-timing-function: cubic-bezier(.4,0,.2,1);
+      transition-duration: var(--collapsible-side-bar-layout-collapse-transition-time);
+      top: var(--collapsible-side-bar-layout-header-height);
+      background-color: var(--collapsible-side-bar-layout-sidebar-background-color);
+      bottom: 0;
+      z-index: 30;
+      width: var(--collapsible-side-bar-layout-expanded-width);
+      max-width: 100vw;
+    }
+
+    .side-bar.opened {
+      left: 0;
+    }
+
+    .overlay {
+      position: fixed;
+      top: var(--collapsible-side-bar-layout-header-height);
+      left: 0;
+      bottom: 0;
+      right: 0;
+      z-index: -100;
+      transition-property: backdrop-filter;
+      transition-timing-function: cubic-bezier(.4,0,.2,1);
+      transition-duration: .15s;
+      display: block;
+    }
+
+    .overlay.visible {
+      background-color: var(--collapsible-side-bar-layout-overlay-color);
+      backdrop-filter: blur(4px);
+      z-index: 20;
+    }
+
+    .header-toolbar {
+      left: 0;
+    }
+
+    .header-toolbar.opened {
+      background-color: inherit;
+    }
+
+    .header-toolbar:hover {
+      background-color: inherit;
+    }
+
+    .main-section {
+      padding-left: 0;
+    }
+
+    .blurred {
+      backdrop-filter: blur(4px);
+    }
+  }
+</style>

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

@@ -0,0 +1,72 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        _pagePadding?: string | undefined;
+        _menuElementMarginBottom?: string | undefined;
+        _menuElementFontSize?: string | undefined;
+        _menuElementFontWeight?: string | undefined;
+        _menuColor?: string | undefined;
+        _selectedMenuColor?: string | undefined;
+        _expandedSideBarWidth?: string | undefined;
+        _collapsedSideBarWidth?: string | undefined;
+        _headerHeight?: string | undefined;
+        _collapseTransitionTime?: string | undefined;
+        _sideBarBackgroundColor?: string | undefined;
+        _overlayColor?: string | undefined;
+        _headerBackgroundColor?: string | undefined;
+        drawerOpened?: boolean | undefined;
+        drawerCollapsed?: boolean | undefined;
+        menuElements?: {
+            id: string;
+            name: string;
+            icon: string;
+        }[] | undefined;
+        menuIconsSize?: number | undefined;
+        selectedMenuElementId?: string | undefined;
+        fullLogo?: string | undefined;
+        partialLogo?: string | undefined;
+    };
+    events: {
+        keypress: KeyboardEvent;
+        collapse: CustomEvent<{
+            collapsed: boolean;
+        }>;
+        'drawer-change': CustomEvent<{
+            opened: boolean;
+        }>;
+        'menu-click': CustomEvent<{
+            menu: {
+                id: string;
+                name: string;
+                icon: string;
+            };
+        }>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        menu: {};
+        'inner-menu': {
+            hamburgerVisible: boolean;
+        };
+        'sidebar-header': {
+            hamburgerVisible: boolean;
+            collapsed: boolean;
+        };
+        'sidebar-main': {
+            hamburgerVisible: boolean;
+            collapsed: boolean;
+        };
+        'sidebar-footer': {
+            hamburgerVisible: boolean;
+            collapsed: boolean;
+        };
+        default: {};
+    };
+};
+export type CollapsibleSideBarLayoutProps = typeof __propDef.props;
+export type CollapsibleSideBarLayoutEvents = typeof __propDef.events;
+export type CollapsibleSideBarLayoutSlots = typeof __propDef.slots;
+export default class CollapsibleSideBarLayout extends SvelteComponentTyped<CollapsibleSideBarLayoutProps, CollapsibleSideBarLayoutEvents, CollapsibleSideBarLayoutSlots> {
+}
+export {};

package/dist/components/layouts/StableDividedSideBarLayout.svelte

@@ -84,6 +84,7 @@ function handleOverlayClick() {
     left: 0;
     right: 0;
     padding: var(--stable-divider-side-bar-layout-side-bar-padding);
+    z-index: 10;
   }
 
   .overlay {

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

@@ -0,0 +1,48 @@
+<script>import { createEventDispatcher } from "svelte";
+import Icon from "../media/Icon.svelte";
+let dispatch = createEventDispatcher();
+export let collapsed = false, openedIconName = "mdi-chevron-left", collapsedIconName = "mdi-chevron-right", iconSize = 12, disabled = false;
+export let _height = "1px", _radius = "0.5px", _marginTop = "10px", _marginBottom = "10px", _marginLeft = "5px", _marginRight = "5px", _dividerColor = "#d2d2d2", _circleColor = "#d2d2d2", _circleBorder = "1px solid", _iconColor = "grey";
+let buttonHeight;
+function handleCollapseClick() {
+  if (!disabled) {
+    collapsed = !collapsed;
+    dispatch("change", { collapsed });
+  }
+}
+</script>
+
+<div
+  style:display="flex"
+  style:margin-right={_marginRight}
+  style:margin-left={_marginLeft}
+  style:margin-top={_marginTop}
+  style:margin-bottom={_marginBottom}
+  style:align-items="center"
+>
+  <div
+    style:background-color={_dividerColor}
+    style:border-radius={_radius}
+    style:height={_height}
+    style:flex-grow={1}
+  />
+  <div
+    style:border-radius={buttonHeight + 'px'}
+    style:border={_circleBorder}
+    style:border-color={_circleColor}
+    bind:clientHeight={buttonHeight}
+    style:width={buttonHeight + 'px'}
+    style:display="flex"
+    style:justify-content="center"
+    style:cursor="pointer"
+    style:color={_iconColor}
+    style:opacity={disabled ? 0 : 1}
+    on:click="{handleCollapseClick}"
+    on:click
+    on:keydown
+    on:keyup
+    on:keypress
+  >
+    <Icon name={collapsed ? collapsedIconName : openedIconName} size={iconSize}></Icon>
+  </div>
+</div>

package/dist/components/simple/common/CollapsibleDivider.svelte.d.ts

@@ -0,0 +1,38 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        collapsed?: boolean | undefined;
+        openedIconName?: string | undefined;
+        collapsedIconName?: string | undefined;
+        iconSize?: number | undefined;
+        disabled?: boolean | undefined;
+        _height?: string | undefined;
+        _radius?: string | undefined;
+        _marginTop?: string | undefined;
+        _marginBottom?: string | undefined;
+        _marginLeft?: string | undefined;
+        _marginRight?: string | undefined;
+        _dividerColor?: string | undefined;
+        _circleColor?: string | undefined;
+        _circleBorder?: string | undefined;
+        _iconColor?: string | undefined;
+    };
+    events: {
+        click: MouseEvent;
+        keydown: KeyboardEvent;
+        keyup: KeyboardEvent;
+        keypress: KeyboardEvent;
+        change: CustomEvent<{
+            collapsed: boolean;
+        }>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CollapsibleDividerProps = typeof __propDef.props;
+export type CollapsibleDividerEvents = typeof __propDef.events;
+export type CollapsibleDividerSlots = typeof __propDef.slots;
+export default class CollapsibleDivider extends SvelteComponentTyped<CollapsibleDividerProps, CollapsibleDividerEvents, CollapsibleDividerSlots> {
+}
+export {};

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

@@ -5,11 +5,11 @@ let lastTouch, startTouch, endTouch, startTime, endTime;
 function handleTouchStart(event) {
   lastTouch = event.touches[0];
   startTouch = event.touches[0];
-  startTime = new Date();
+  startTime = /* @__PURE__ */ new Date();
 }
 function handleTouchEnd(event) {
   endTouch = event.changedTouches[0];
-  endTime = new Date();
+  endTime = /* @__PURE__ */ new Date();
   let timeDifference = endTime.getTime() - startTime.getTime();
   if (timeDifference < timeThreshold) {
     let direction;

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

@@ -2,7 +2,8 @@
 import {
   fly
 } from "svelte/transition";
-export let open = false, top = void 0, left = void 0, width, height, maxHeight = void 0, overflow = "auto", refreshPosition = false, boxShadow = void 0, borderRadius = void 0, activator = void 0, anchor = "bottom", closeOnClickOutside = false, inAnimation = fly, inAnimationConfig = {
+export let _top = void 0, _left = void 0, _width = "auto", _height = "auto", _maxHeight = void 0, _overflow = "auto", _boxShadow = void 0, _borderRadius = void 0;
+export let open = false, refreshPosition = false, activator = void 0, anchor = "bottom", closeOnClickOutside = false, inAnimation = fly, inAnimationConfig = {
   duration: 100,
   y: 10
 }, outAnimation = fly, outAnimationConfig = {
@@ -16,28 +17,37 @@ function calculateMenuPosition(params) {
       if (anchor == "bottom") {
         let { left: activatorLeft, top: activatorTop } = params.activator.getBoundingClientRect();
         let activatorHeight = params.activator.offsetHeight;
-        top = activatorTop + window.scrollY + activatorHeight;
-        left = activatorLeft + window.scrollX;
+        _top = activatorTop + window.scrollY + activatorHeight;
+        _left = activatorLeft + window.scrollX;
       } else if (anchor == "bottom-center") {
         let { left: activatorLeft, top: activatorTop } = params.activator.getBoundingClientRect();
         let activatorHeight = params.activator.offsetHeight;
         let activatorWidth = params.activator.offsetWidth;
         let menuWidth = params.menuElement.offsetWidth;
-        top = activatorTop + window.scrollY + activatorHeight;
-        left = activatorLeft + window.scrollX;
+        _top = activatorTop + window.scrollY + activatorHeight;
+        _left = activatorLeft + window.scrollX;
         if (menuWidth > activatorWidth) {
-          left = left - (menuWidth - activatorWidth) / 2;
+          _left = _left - (menuWidth - activatorWidth) / 2;
         } else {
-          left = left - (activatorWidth - menuWidth) / 2;
+          _left = _left + (activatorWidth - menuWidth) / 2;
         }
       }
     }
-    if (window.innerWidth + window.scrollX < (left || 0) + (menuElement?.offsetWidth || 0)) {
-      left = Math.max(
+    if (window.innerWidth + window.scrollX < (_left || 0) + (menuElement?.offsetWidth || 0)) {
+      _left = Math.max(
         window.innerWidth + window.scrollX - (menuElement?.offsetWidth || 0),
         0
       );
     }
+    if (!!positionedAncestor) {
+      let { left: positionedAncestorLeft, top: positionedAncestorTop } = positionedAncestor.getBoundingClientRect();
+      if (!_left)
+        _left = 0;
+      if (!_top)
+        _top = 0;
+      _left = _left - positionedAncestorLeft;
+      _top = _top - positionedAncestorTop;
+    }
   }
 }
 $:
@@ -64,7 +74,7 @@ $:
       zIndex = maxZIndex + 2;
   }
 $:
-  if (!!width && !!activator && !!menuElement) {
+  if (!!_width && !!activator && !!menuElement) {
     calculateMenuPosition({ activator, menuElement });
   }
 $:
@@ -74,27 +84,41 @@ $:
   }
 $:
   if (closeOnClickOutside && !!menuElement) {
-    window.addEventListener("click", () => {
+    window.addEventListener("mousedown", () => {
       open = false;
     });
     window.addEventListener("touchstart", () => {
       open = false;
     });
     if (activator) {
-      activator.addEventListener("click", (event) => {
+      activator.addEventListener("mousedown", (event) => {
         event.stopPropagation();
       });
       activator.addEventListener("touchstart", (event) => {
         event.stopPropagation();
       });
     }
-    menuElement.addEventListener("click", (event) => {
+    menuElement.addEventListener("mousedown", (event) => {
       event.stopPropagation();
     });
     menuElement.addEventListener("touchstart", (event) => {
       event.stopPropagation();
     });
   }
+let positionedAncestor = void 0;
+$:
+  if (!!menuElement && !!activator) {
+    let elem = getPositionedAncestor(menuElement.parentElement);
+    positionedAncestor = elem == null ? void 0 : elem;
+    calculateMenuPosition({ menuElement, activator });
+  }
+function getPositionedAncestor(elem) {
+  if (!elem)
+    return null;
+  if (["fixed", "absolute"].includes(getComputedStyle(elem).position))
+    return elem;
+  return getPositionedAncestor(elem.parentElement);
+}
 </script>
 
 {#if open}
@@ -104,14 +128,14 @@ $:
     data-uid={currentUid}
     style:z-index={zIndex}
     style:position="absolute"
-    style:top={top + "px"}
-    style:box-shadow={boxShadow}
-    style:border-radius={borderRadius}
-    style:left={left + "px"}
-    style:height
-    style:max-height={maxHeight}
-    style:width
-    style:overflow
+    style:top={_top + "px"}
+    style:box-shadow={_boxShadow}
+    style:border-radius={_borderRadius}
+    style:left={_left + "px"}
+    style:height={_height}
+    style:max-height={_maxHeight}
+    style:width={_width}
+    style:overflow={_overflow}
     in:inAnimation={inAnimationConfig}
     out:outAnimation={outAnimationConfig}
   >

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

@@ -2,16 +2,16 @@ import { SvelteComponentTyped } from "svelte";
 import { type FadeParams, type FlyParams, type SlideParams, type TransitionConfig } from "svelte/transition";
 declare const __propDef: {
     props: {
+        _top?: number | undefined;
+        _left?: number | undefined;
+        _width?: string | undefined;
+        _height?: string | undefined;
+        _maxHeight?: string | undefined;
+        _overflow?: string | undefined;
+        _boxShadow?: string | undefined;
+        _borderRadius?: string | undefined;
         open?: boolean | undefined;
-        top?: number | undefined;
-        left?: number | undefined;
-        width: string;
-        height: string;
-        maxHeight?: string | undefined;
-        overflow?: string | undefined;
         refreshPosition?: boolean | undefined;
-        boxShadow?: string | undefined;
-        borderRadius?: string | undefined;
         activator?: HTMLElement | undefined;
         anchor?: "bottom" | "bottom-center" | undefined;
         closeOnClickOutside?: boolean | undefined;

package/dist/components/simple/dates/Calendar.svelte

@@ -1,6 +1,6 @@
 <script>import { fly } from "svelte/transition";
 import { getDateRowsStats, getDaysNames } from "./utils";
-export let selectedDate = void 0, visibleMonth = new Date().getMonth(), visibleYear = new Date().getFullYear(), locale = "it", showExtraMonthDays = true, showHeader = true, height = "100%", width = "100%", dayWidth = "30px", dayHeight = "30px", dayHoverColor = "#c9c8c873", daySelectedColor = "#adadad", selectedTextColor = "black", gridGap = "1px", dayBackgroundColor = void 0, animationDuration = 200;
+export let selectedDate = void 0, visibleMonth = (/* @__PURE__ */ new Date()).getMonth(), visibleYear = (/* @__PURE__ */ new Date()).getFullYear(), locale = "it", showExtraMonthDays = true, showHeader = true, height = "100%", width = "100%", dayWidth = "30px", dayHeight = "30px", dayHoverColor = "#c9c8c873", daySelectedColor = "#adadad", selectedTextColor = "black", gridGap = "1px", dayBackgroundColor = void 0, animationDuration = 200;
 import { createEventDispatcher } from "svelte";
 const dispatch = createEventDispatcher();
 function handleDayClick(dateStat, extraMonth) {

package/dist/components/simple/dates/DatePicker.svelte

@@ -3,8 +3,8 @@ import YearSelector from "./YearSelector.svelte";
 import MonthSelector from "./MonthSelector.svelte";
 import Calendar from "./Calendar.svelte";
 import Button from "../buttons/Button.svelte";
-export let selectedYear = new Date().getFullYear(), selectedMonth = new Date().getMonth(), selectedDate = new Date(), view = "day", locale = "it", primaryColor = "#008080", headerBackgroundColor = primaryColor, arrowColor = primaryColor, hoverColor = "#00808012", selectedDayColor = "black", headerColor = "white", cardColor = "black", cardBackGroundColor = "rgba(255,255,255,0)", selectableYears = [...Array(150).keys()].map(
-  (i) => i + (new Date().getFullYear() - 75)
+export let selectedYear = (/* @__PURE__ */ new Date()).getFullYear(), selectedMonth = (/* @__PURE__ */ new Date()).getMonth(), selectedDate = /* @__PURE__ */ new Date(), view = "day", locale = "it", primaryColor = "#008080", headerBackgroundColor = primaryColor, arrowColor = primaryColor, hoverColor = "#00808012", selectedDayColor = "black", headerColor = "white", cardColor = "black", cardBackGroundColor = "rgba(255,255,255,0)", selectableYears = [...Array(150).keys()].map(
+  (i) => i + ((/* @__PURE__ */ new Date()).getFullYear() - 75)
 ), height = "100%", width = "100%";
 let selectorText = void 0;
 let elementDisabled = "date";

package/dist/components/simple/dates/TimePickerTextField.svelte

@@ -27,7 +27,7 @@ $: {
         else if (dayPeriod == "pm" && hours != 12)
           hours += 12;
       }
-      time = new Date();
+      time = /* @__PURE__ */ new Date();
       time.setHours(hours, minutes, 0);
     } else
       time = void 0;

package/dist/components/simple/dates/YearSelector.svelte

@@ -1,7 +1,7 @@
 <script>import { scrollAtCenter } from "../common/scroller";
 import { createEventDispatcher, onMount } from "svelte";
 export let selectedYear = void 0, selectableYears = [...Array(150).keys()].map(
-  (i) => i + (new Date().getFullYear() - 75)
+  (i) => i + ((/* @__PURE__ */ new Date()).getFullYear() - 75)
 ), height = "100%", width = "100%";
 let container, targetButtons = {};
 onMount(() => {

package/dist/components/simple/dialogs/Dialog.svelte

@@ -2,7 +2,8 @@
 import { BROWSER } from "esm-env";
 import { beforeUpdate, onMount } from "svelte";
 import Keyboarder, {} from "../../../utils/keyboarder";
-export let open = false, overlayOpacity = "30%", overlayColor = "#282828", overlayBackdropFilter = void 0, transition = "fly-up", transitionTimingFunction = "cubic-bezier(0.075, 0.82, 0.165, 1)", transitionDuration = "0.5s";
+export let open = false, transition = "fly-up";
+export let _overlayOpacity = "30%", _overlayColor = "#282828", _overlayBackdropFilter = void 0, _transitionTimingFunction = "cubic-bezier(0.075, 0.82, 0.165, 1)", _transitionDuration = "0.5s";
 let zIndex = 50, localOpen = open, dialogElement, teleportedUid = void 0, hasBeenOpened = false;
 onMount(() => {
   if (!teleportedUid) {
@@ -61,14 +62,14 @@ function handleOverlayClick() {
 >
   <div
     data-dialog={localOpen}
-    style:--dialog-overlay-opacity={overlayOpacity}
-    style:--dialog-transition-timing-function={transitionTimingFunction}
-    style:--dialog-transition-duration={transitionDuration}
+    style:--dialog-overlay-opacity={_overlayOpacity}
+    style:--dialog-transition-timing-function={_transitionTimingFunction}
+    style:--dialog-transition-duration={_transitionDuration}
     style:--dialog-z-index={zIndex}
     style:display="flex"
     style:align-items="center"
     style:justify-content="space-between"
-    style:backdrop-filter={localOpen ? overlayBackdropFilter : 'none'}
+    style:backdrop-filter={localOpen ? _overlayBackdropFilter : 'none'}
     class="overlay-container"
     class:overlay-container-active={localOpen}
     class:overlay-container-deactive={!localOpen}
@@ -76,7 +77,7 @@ function handleOverlayClick() {
     bind:this={dialogElement}
   >
     <div
-      style:background-color={overlayColor}
+      style:background-color={_overlayColor}
       class="overlay"
       class:overlay-active={localOpen}
       class:hidden-behind={!localOpen && !hasBeenOpened}

package/dist/components/simple/dialogs/Dialog.svelte.d.ts

@@ -2,12 +2,12 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         open?: boolean | undefined;
-        overlayOpacity?: string | undefined;
-        overlayColor?: string | undefined;
-        overlayBackdropFilter?: string | undefined;
         transition?: "fly-down" | "fly-up" | "fly-horizontal" | "scale" | "fade" | undefined;
-        transitionTimingFunction?: string | undefined;
-        transitionDuration?: string | undefined;
+        _overlayOpacity?: string | undefined;
+        _overlayColor?: string | undefined;
+        _overlayBackdropFilter?: string | undefined;
+        _transitionTimingFunction?: string | undefined;
+        _transitionDuration?: string | undefined;
     };
     events: {
         click: MouseEvent;

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

@@ -0,0 +1,149 @@
+<script>import Icon from "../media/Icon.svelte";
+export let _padding = null, _width = null, _height = null, _backgroundColor = null, _borderRadius = null, _boxShadow = null, _focusBackgroundColor = null, _focusBoxShadow = null, _transition = null, _fontSize = null, _fontWeight = null, _outerGap = null, _innerGap = null, _hintFontSize = null, _hintColor = null, _hintMarginLeft = null, _marginBottom = null;
+export let value = void 0, type = "text", placeholder = void 0, disabled = false, readonly = false, appendIcon = void 0, appendInnerIcon = void 0, prependIcon = void 0, prependInnerIcon = void 0, iconSize = 12, hint = void 0;
+</script>
+
+<div
+  class="textfield-container"
+  style:--simple-textfield-padding={_padding}
+  style:--simple-textfield-height={_height}
+  style:--simple-textfield-width={_width}
+  style:--simple-textfield-background-color={_backgroundColor}
+  style:--simple-textfield-border-radius={_borderRadius}
+  style:--simple-textfield-box-shadow={_boxShadow}
+  style:--simple-textfield-focus-background-color={_focusBackgroundColor}
+  style:--simple-textfield-focus-box-shadow={_focusBoxShadow}
+  style:--simple-textfield-transition={_transition}
+  style:--simple-textfield-font-size={_fontSize}
+  style:--simple-textfield-font-weight={_fontWeight}
+  style:--simple-textfield-outer-gap={_outerGap}
+  style:--simple-textfield-inner-gap={_innerGap}
+  style:--simple-textfield-hint-font-size={_hintFontSize}
+  style:--simple-textfield-hint-color={_hintColor}
+  style:--simple-textfield-hint-margin-left={_hintMarginLeft}
+  style:--simple-textfield-margin-bottom={_marginBottom}
+>
+  <div class="row">
+    <slot name="prepend" {prependIcon} {iconSize}>
+      {#if !!prependIcon}
+          <Icon name={prependIcon} size={iconSize}></Icon>
+      {/if}
+    </slot>
+    <div class="textfield">
+      <slot name="prepend-inner" {prependInnerIcon} {iconSize}>
+        {#if !!prependInnerIcon}
+          <Icon name={prependInnerIcon} size={iconSize}></Icon>
+        {/if}
+      </slot>
+      {#if type == "text"}
+        <input
+          bind:value={value}
+          placeholder={placeholder}
+          type="text"
+          disabled={disabled}
+          readonly={readonly}
+          on:change
+          on:input
+          on:focus
+          on:blur
+          on:keydown
+          on:keypress
+          on:keyup
+        />
+      {:else if type == "password"}
+        <input
+          bind:value={value}
+          placeholder={placeholder}
+          type="password"
+          disabled={disabled}
+          readonly={readonly}
+          on:change
+          on:input
+          on:focus
+          on:blur
+          on:keydown
+          on:keypress
+          on:keyup
+        />
+      {:else if type == "number"}
+        <input
+          bind:value={value}
+          placeholder={placeholder}
+          type="number"
+          disabled={disabled}
+          readonly={readonly}
+          on:change
+          on:input
+          on:focus
+          on:blur
+          on:keydown
+          on:keypress
+          on:keyup
+        />
+      {/if}
+      <slot name="append-inner" {appendInnerIcon} {iconSize}>
+        {#if !!appendInnerIcon}
+          <Icon name={appendInnerIcon} size={iconSize}></Icon>
+        {/if}
+      </slot>
+    </div>
+    <slot name="append" {appendIcon} {iconSize}>
+      {#if !!appendIcon}
+        <Icon name={appendIcon} size={iconSize}></Icon>
+      {/if}
+    </slot>
+  </div>
+  <div class="row">
+    <slot name="hint">
+      {#if !!hint}
+        <span class="hint">{hint}</span>
+      {/if}
+    </slot>
+  </div>
+</div>
+
+<style>
+  .row {
+    display: flex;
+    align-items: center;
+    gap: var(--simple-textfield-outer-gap, 8px);
+    margin-bottom: var(--simple-textfield-margin-bottom, 5px);
+  }
+
+  .row:last-of-type {
+    margin-bottom: 0px;
+  }
+
+  .hint {
+    margin-left: var(--simple-textfield-hint-margin-left, 20px);
+    font-size: var(--simple-textfield-hint-font-size, 0.75rem);
+    color: var(--simple-textfield-hint-color, grey);
+  }
+
+  .textfield {
+    padding: var(--simple-textfield-padding, 0.65rem 1rem 0.65rem 1rem);
+    width: var(--simple-textfield-width, 280px);
+    height: var(--simple-textfield-height);
+    background-color: var(--simple-textfield-background-color, rgb(244 244 245/1));
+    border: none;
+    border-radius: var(--simple-textfield-border-radius, 9999px);
+    box-shadow: var(--simple-textfield-box-shadow, none);
+    transition: var(--simple-textfield-transition, 0.2s);
+    gap: var(--simple-textfield-inner-gap, 8px);
+    display: flex;
+  }
+
+  .textfield:focus-within {
+    background-color: var(--simple-textfield-focus-background-color, var(--simple-textfield-background-color, rgb(244 244 245/1)));
+    box-shadow: var(--simple-textfield-focus-box-shadow, rgba(100, 100, 111, 0.4) 0px 4px 25px 0px);
+  }
+
+  input {
+    outline: none;
+    width: 100%;
+    background-color: transparent;
+    font-size: var(--simple-textfield-font-size, .9rem);
+    font-weight: var(--simple-textfield-font-weight, normal);
+    border: none
+  }
+</style>

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

@@ -0,0 +1,69 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        _padding?: string | null | undefined;
+        _width?: string | null | undefined;
+        _height?: string | null | undefined;
+        _backgroundColor?: string | null | undefined;
+        _borderRadius?: string | null | undefined;
+        _boxShadow?: string | null | undefined;
+        _focusBackgroundColor?: string | null | undefined;
+        _focusBoxShadow?: string | null | undefined;
+        _transition?: string | null | undefined;
+        _fontSize?: string | null | undefined;
+        _fontWeight?: string | null | undefined;
+        _outerGap?: string | null | undefined;
+        _innerGap?: string | null | undefined;
+        _hintFontSize?: string | null | undefined;
+        _hintColor?: string | null | undefined;
+        _hintMarginLeft?: string | null | undefined;
+        _marginBottom?: string | null | undefined;
+        value?: string | number | undefined;
+        type?: "number" | "text" | "password" | undefined;
+        placeholder?: string | undefined;
+        disabled?: boolean | undefined;
+        readonly?: boolean | undefined;
+        appendIcon?: string | undefined;
+        appendInnerIcon?: string | undefined;
+        prependIcon?: string | undefined;
+        prependInnerIcon?: string | undefined;
+        iconSize?: number | undefined;
+        hint?: string | undefined;
+    };
+    events: {
+        change: Event;
+        input: Event;
+        focus: FocusEvent;
+        blur: FocusEvent;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        keyup: KeyboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        prepend: {
+            prependIcon: string | undefined;
+            iconSize: number;
+        };
+        'prepend-inner': {
+            prependInnerIcon: string | undefined;
+            iconSize: number;
+        };
+        'append-inner': {
+            appendInnerIcon: string | undefined;
+            iconSize: number;
+        };
+        append: {
+            appendIcon: string | undefined;
+            iconSize: number;
+        };
+        hint: {};
+    };
+};
+export type SimpleTextFieldProps = typeof __propDef.props;
+export type SimpleTextFieldEvents = typeof __propDef.events;
+export type SimpleTextFieldSlots = typeof __propDef.slots;
+export default class SimpleTextField extends SvelteComponentTyped<SimpleTextFieldProps, SimpleTextFieldEvents, SimpleTextFieldSlots> {
+}
+export {};

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

@@ -5,6 +5,7 @@ import { createId } from "@paralleldrive/cuid2";
 import { onMount } from "svelte";
 let inputId = createId(), focused = false, legendWidth = 0, labelElement = void 0;
 onMount(() => {
+  console.warn("TextField component is going to be depracated. Please use SimpleTextField instead.");
   if (labelElement) {
     legendWidth = labelElement.offsetWidth * 0.8 + 8;
   }

package/dist/components/simple/notifiers/AlertBanner.svelte

@@ -0,0 +1,92 @@
+<script>import { createEventDispatcher } from "svelte";
+export let _cursor = "pointer", _bannerColor = "grey", _borderRadius = null, _paddingLeft = null, _paddingRight = null, _paddingTop = null, _paddingBottom = null, _borderWidth = null, _width = null;
+export let title = void 0, description = void 0, disabled = false;
+let dispatch = createEventDispatcher();
+function handleClickEvent(e) {
+  if (!disabled)
+    dispatch("click", e);
+}
+function handleKeypressEvent(e) {
+  if (!disabled)
+    dispatch("keypress", e);
+}
+</script>
+
+<div 
+  style:--alert-banner-color={_bannerColor}
+  style:--alert-banner-border-radius={_borderRadius}
+  style:--alert-banner-padding-left={_paddingLeft}
+  style:--alert-banner-padding-right={_paddingRight}
+  style:--alert-banner-padding-top={_paddingTop}
+  style:--alert-banner-padding-bottom={_paddingBottom}
+  style:--alert-banner-border-width={_borderWidth}
+  style:width={_width}
+  class="alert-banner-container"
+  style:cursor={_cursor}
+  on:keypress={handleKeypressEvent}
+  on:click={handleClickEvent}
+>
+  <div 
+    class="border-colored"
+  ></div>
+  <div class="body">
+    <div class="content">
+      <slot name="content" title={title} description={description}>
+        {#if !!title}
+          <slot name="title" title={title}>
+            <div class="title">{title}</div>
+          </slot>
+        {/if}
+        {#if !!description}
+          <slot name="description" description={description}>
+            <div class="description">{description}</div>
+          </slot>
+        {/if}
+      </slot>
+    </div>
+    <div class="append">
+      <slot name="append" disabled={disabled}></slot>
+    </div>
+  </div>
+</div>
+
+<style>
+  .alert-banner-container {
+    position: relative;
+    box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)!important;
+    border-radius: var(--alert-banner-border-radius, 5px);
+  }
+
+  .border-colored {
+    background-color: var(--alert-banner-color);
+    position: absolute;
+    width: var(--alert-banner-border-width, .7rem);
+    top: 0px;
+    bottom: 0px;
+    border-radius: var(--alert-banner-border-radius, 5px) 0px 0px var(--alert-banner-border-radius, 5px);
+  }
+
+  .body {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .content {
+    padding-left: var(--alert-banner-padding-left, .5rem);
+    padding-top: var(--alert-banner-padding-top, .3rem);
+    padding-bottom: var(--alert-banner-padding-bottom, .3rem);
+    padding-right: var(--alert-banner-padding-bottom, .3rem);
+  }
+
+  .title {
+    font-weight: 700;
+    font-size: 1.2rem;
+    padding-left: 10px;
+  }
+
+  .description {
+    padding-left: 10px;
+    white-space: pre-wrap;
+  }
+</style>

package/dist/components/simple/notifiers/AlertBanner.svelte.d.ts

@@ -0,0 +1,44 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        _cursor?: string | undefined;
+        _bannerColor?: string | null | undefined;
+        _borderRadius?: string | null | undefined;
+        _paddingLeft?: string | null | undefined;
+        _paddingRight?: string | null | undefined;
+        _paddingTop?: string | null | undefined;
+        _paddingBottom?: string | null | undefined;
+        _borderWidth?: string | null | undefined;
+        _width?: string | null | undefined;
+        title?: string | undefined;
+        description?: string | undefined;
+        disabled?: boolean | undefined;
+    };
+    events: {
+        click: CustomEvent<MouseEvent>;
+        keypress: CustomEvent<KeyboardEvent>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        content: {
+            title: string | undefined;
+            description: string | undefined;
+        };
+        title: {
+            title: string | undefined;
+        };
+        description: {
+            description: string | undefined;
+        };
+        append: {
+            disabled: boolean;
+        };
+    };
+};
+export type AlertBannerProps = typeof __propDef.props;
+export type AlertBannerEvents = typeof __propDef.events;
+export type AlertBannerSlots = typeof __propDef.slots;
+export default class AlertBanner extends SvelteComponentTyped<AlertBannerProps, AlertBannerEvents, AlertBannerSlots> {
+}
+export {};

package/dist/index.d.ts

@@ -19,6 +19,7 @@ export { default as FileInputList } from './components/simple/forms/FileInputLis
 export { default as Switch } from './components/simple/forms/Switch.svelte';
 export { default as Textarea } from './components/simple/forms/Textarea.svelte';
 export { default as Textfield } from './components/simple/forms/Textfield.svelte';
+export { default as SimpleTextField } from './components/simple/forms/SimpleTextField.svelte';
 export { default as VerticalSwitch } from './components/simple/forms/VerticalSwitch.svelte';
 export { default as VerticalTextSwitch } from './components/simple/forms/VerticalTextSwitch.svelte';
 export { default as CircularLoader } from './components/simple/loaders/CircularLoader.svelte';

package/dist/index.js

@@ -19,6 +19,7 @@ export { default as FileInputList } from './components/simple/forms/FileInputLis
 export { default as Switch } from './components/simple/forms/Switch.svelte';
 export { default as Textarea } from './components/simple/forms/Textarea.svelte';
 export { default as Textfield } from './components/simple/forms/Textfield.svelte';
+export { default as SimpleTextField } from './components/simple/forms/SimpleTextField.svelte';
 export { default as VerticalSwitch } from './components/simple/forms/VerticalSwitch.svelte';
 export { default as VerticalTextSwitch } from './components/simple/forms/VerticalTextSwitch.svelte';
 export { default as CircularLoader } from './components/simple/loaders/CircularLoader.svelte';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run package",
@@ -48,7 +48,7 @@
     "svelte-check": "^3.0.1",
     "tslib": "^2.4.1",
     "typescript": "^4.9.3",
-    "vite": "^4.0.0",
+    "vite": "^4.1.5",
     "vitest": "^0.25.3"
   },
   "svelte": "./dist/index.js",