@likable-hair/svelte 3.0.54 → 3.0.55

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

@@ -2,7 +2,7 @@
 import Drawer from "../../simple/navigation/Drawer.svelte";
 import Menu from "../../simple/common/Menu.svelte";
 import MediaQuery from "../../simple/common/MediaQuery.svelte";
-export let open = false, activator, drawerPosition = "bottom", menuAnchor = "bottom-center", _boxShadow = "rgb(var(--global-color-grey-900), .5) 0px 2px 4px", _height = "fit-content", _width = void 0, _maxHeight = void 0, _minWidth = "100px", _borderRadius = "5px";
+export let open = false, activator, drawerPosition = "bottom", menuAnchor = "bottom-center", stayInViewport = true, flipOnOverflow = false, _boxShadow = "rgb(var(--global-color-grey-900), .5) 0px 2px 4px", _height = "fit-content", _width = void 0, _maxHeight = void 0, _minWidth = "100px", _borderRadius = "5px";
 </script>
 
 <MediaQuery let:mAndDown>
@@ -27,6 +27,8 @@ export let open = false, activator, drawerPosition = "bottom", menuAnchor = "bot
       _borderRadius={_borderRadius}
       _width={_width || ""}
       anchor={menuAnchor}
+      bind:stayInViewport={stayInViewport}
+      bind:flipOnOverflow={flipOnOverflow}
     >
       <slot isDrawer={false} isMenu={true}></slot>
     </Menu>

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

@@ -9,6 +9,8 @@ declare const __propDef: {
         activator: HTMLElement;
         drawerPosition?: ComponentProps<Drawer>['position'];
         menuAnchor?: ComponentProps<Menu>['anchor'];
+        stayInViewport?: ComponentProps<Menu>['stayInViewport'];
+        flipOnOverflow?: ComponentProps<Menu>['flipOnOverflow'];
         _boxShadow?: string | undefined;
         _height?: string | undefined;
         _width?: string | undefined;

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

@@ -3,7 +3,7 @@
 <script>import "../../../css/main.css";
 import MenuOrDrawer from "./MenuOrDrawer.svelte";
 import SelectableVerticalList from "../../simple/lists/SelectableVerticalList.svelte";
-export let open = false, activator, drawerPosition = "bottom", menuAnchor = "bottom-center", elements = [], _boxShadow = "rgb(var(--global-color-grey-900), .5) 0px 2px 4px", _height = "fit-content", _maxHeight = void 0, _minWidth = "100px", _borderRadius = "5px";
+export let open = false, activator, drawerPosition = "bottom", menuAnchor = "bottom-center", elements = [], stayInViewport = true, flipOnOverflow = false, _boxShadow = "rgb(var(--global-color-grey-900), .5) 0px 2px 4px", _height = "fit-content", _maxHeight = void 0, _minWidth = "100px", _borderRadius = "5px";
 let selected;
 let focused;
 $:
@@ -19,6 +19,8 @@ $:
   bind:activator
   bind:drawerPosition
   bind:menuAnchor
+  bind:stayInViewport
+  bind:flipOnOverflow
   {_boxShadow}
   {_height}
   {_maxHeight}

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

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 export type ArrayElement<ArrayType extends readonly unknown[]> = ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
 import '../../../css/main.css';
 import type { ComponentProps } from 'svelte';
+import MenuOrDrawer from "./MenuOrDrawer.svelte";
 import type Drawer from '../../simple/navigation/Drawer.svelte';
 import type Menu from '../../simple/common/Menu.svelte';
 import SelectableVerticalList from '../../simple/lists/SelectableVerticalList.svelte';
@@ -12,6 +13,8 @@ declare const __propDef: {
         drawerPosition?: ComponentProps<Drawer>['position'];
         menuAnchor?: ComponentProps<Menu>['anchor'];
         elements?: ComponentProps<SelectableVerticalList>['elements'];
+        stayInViewport?: ComponentProps<MenuOrDrawer>['stayInViewport'];
+        flipOnOverflow?: ComponentProps<MenuOrDrawer>['flipOnOverflow'];
         _boxShadow?: string | undefined;
         _height?: string | undefined;
         _maxHeight?: string | undefined;

package/dist/components/{simple/dates → composed/forms}/DatePickerTextField.svelte

@@ -1,13 +1,15 @@
 <script>import IMask, { InputMask } from "imask";
-import SimpleTextField from "../forms/SimpleTextField.svelte";
-import DatePicker from "./DatePicker.svelte";
-import Menu from "../common/Menu.svelte";
-import Icon from "../media/Icon.svelte";
+import SimpleTextField from "../../simple/forms/SimpleTextField.svelte";
+import DatePicker from "../../simple/dates/DatePicker.svelte";
+import Menu from "../../simple/common/Menu.svelte";
+import Icon from "../../simple/media/Icon.svelte";
 import { onMount } from "svelte";
 import { DateTime } from "luxon";
 import { createEventDispatcher } from "svelte";
-import MediaQuery from "../common/MediaQuery.svelte";
-import Dialog from "../dialogs/Dialog.svelte";
+import MediaQuery from "../../simple/common/MediaQuery.svelte";
+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;
 let activator, refreshPosition = false, menuElement, inputElement, mask = {
@@ -66,7 +68,7 @@ onMount(() => {
 function handleInputChange(event) {
   setTimeout(() => {
     const typedValue = mask.value;
-    if (!!typedValue) {
+    if (typedValue !== void 0 && typedValue !== null) {
       const dayOfMonthIndex = pattern.indexOf("dd");
       const dayOfMonth = typedValue.substring(dayOfMonthIndex, dayOfMonthIndex + 2);
       const monthIndex = pattern.indexOf("MM");
@@ -120,36 +122,47 @@ $:
 <MediaQuery let:mAndDown>
   <div
     bind:this={activator}
+    class="date-picker-activator {clazz.activator || ''}"
   >
-    <SimpleTextField
-      bind:value={mask.value}
-      on:focus={() => handleTextFieldFocus(mAndDown)}
-      on:keydown={handleInputChange}
-      bind:input={inputElement}
-      bind:placeholder
+    <slot 
+      name="activator"
+      {mask}
+      {handleTextFieldFocus}
+      {handleInputChange}
+      {inputElement}
+      {placeholder}
     >
-      <svelte:fragment slot="prepend-inner" let:prependInnerIcon let:iconSize>
-        <slot name="prepend-inner" {prependInnerIcon} {iconSize}>
-          <Icon
-            name="mdi-calendar"
-            click
-            on:click={() => menuOpened = !menuOpened}
-          ></Icon>
-        </slot>
-      </svelte:fragment>
-      <svelte:fragment slot="append-inner" let:appendInnerIcon let:iconSize>
-        <slot name="append-inner" {appendInnerIcon} {iconSize}>
-        </slot>
-      </svelte:fragment>
-      <svelte:fragment slot="prepend" let:prependIcon let:iconSize>
-        <slot name="append-inner" {prependIcon} {iconSize}>
-        </slot>
-      </svelte:fragment>
-      <svelte:fragment slot="append" let:appendIcon let:iconSize>
-        <slot name="append-inner" {appendIcon} {iconSize}>
-        </slot>
-      </svelte:fragment>
-    </SimpleTextField>
+      <SimpleTextField
+        bind:value={mask.value}
+        on:focus={() => handleTextFieldFocus(mAndDown)}
+        on:keydown={handleInputChange}
+        bind:input={inputElement}
+        bind:placeholder
+        class={clazz.textfield}
+      >
+        <svelte:fragment slot="prepend-inner" let:prependInnerIcon let:iconSize>
+          <slot name="prepend-inner" {prependInnerIcon} {iconSize}>
+            <Icon
+              name="mdi-calendar"
+              click
+              on:click={() => menuOpened = !menuOpened}
+            ></Icon>
+          </slot>
+        </svelte:fragment>
+        <svelte:fragment slot="append-inner" let:appendInnerIcon let:iconSize>
+          <slot name="append-inner" {appendInnerIcon} {iconSize}>
+          </slot>
+        </svelte:fragment>
+        <svelte:fragment slot="prepend" let:prependIcon let:iconSize>
+          <slot name="append-inner" {prependIcon} {iconSize}>
+          </slot>
+        </svelte:fragment>
+        <svelte:fragment slot="append" let:appendIcon let:iconSize>
+          <slot name="append-inner" {appendIcon} {iconSize}>
+          </slot>
+        </svelte:fragment>
+      </SimpleTextField>
+    </slot>
   </div>
 
   {#if mAndDown && mobileDialog}
@@ -204,3 +217,9 @@ $:
   {/if}
 </MediaQuery>
 
+<style>
+  .date-picker-activator {
+    width: fit-content;
+  }
+</style>
+

package/dist/components/{simple/dates → composed/forms}/DatePickerTextField.svelte.d.ts

@@ -1,7 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
-import type { DateStat } from './utils';
+import SimpleTextField from "../../simple/forms/SimpleTextField.svelte";
+import { type ComponentProps } from 'svelte';
+import type { DateStat } from '../../simple/dates/utils';
 declare const __propDef: {
     props: {
+        class?: {
+            activator?: string | undefined;
+            textfield?: ComponentProps<SimpleTextField>['class'];
+        } | undefined;
         menuOpened?: boolean | undefined;
         openingId?: string | undefined;
         pattern?: string | undefined;
@@ -21,6 +27,15 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        activator: {
+            mask: {
+                value: string | undefined;
+            };
+            handleTextFieldFocus: (mobile: boolean) => void;
+            handleInputChange: (event: any) => void;
+            inputElement: HTMLElement;
+            placeholder: string | undefined;
+        };
         'prepend-inner': {
             prependInnerIcon: string | undefined;
             iconSize: string;

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

@@ -1,7 +1,7 @@
 <script>import Dropdown, {} from "../forms/Dropdown.svelte";
 import { GenericModes, SelectModes, StringModes } from "../../../utils/filters/filters";
 import SimpleTextField from "../../simple/forms/SimpleTextField.svelte";
-import DatePickerTextField from "../../simple/dates/DatePickerTextField.svelte";
+import DatePickerTextField from "../forms/DatePickerTextField.svelte";
 import Button from "../../simple/buttons/Button.svelte";
 import { createEventDispatcher } from "svelte";
 import Validator from "../../../utils/filters/validator";

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

@@ -1,6 +1,6 @@
 <script>import { GenericModes, SelectModes, StringModes } from "../../../utils/filters/filters";
 import SimpleTextField from "../../simple/forms/SimpleTextField.svelte";
-import DatePickerTextField from "../../simple/dates/DatePickerTextField.svelte";
+import DatePickerTextField from "../forms/DatePickerTextField.svelte";
 import Button from "../../simple/buttons/Button.svelte";
 import { createEventDispatcher } from "svelte";
 import Validator from "../../../utils/filters/validator";

package/dist/components/layouts/UnstableDividedSideBarLayout.svelte

@@ -62,7 +62,7 @@ let sidebarExpanded = false;
       on:keypress={() => {if(expandOn == 'click' && !mAndDown) sidebarExpanded = true}}
       use:clickOutside 
       on:clickoutside={() => {if(expandOn == 'click') sidebarExpanded = false}}
-      class="side-bar {clazz.header}"
+      class="side-bar {clazz.header || ''}"
     >
       <div class="side-bar-content">
         <slot name="sidebar" hamburgerVisible={mAndDown} {sidebarExpanded}>
@@ -140,7 +140,7 @@ let sidebarExpanded = false;
       var(--unstable-divided-side-bar-layout-default-side-bar-padding)
     );
     z-index: 10;
-    overflow: auto;
+    overflow: clip;
     transition: all .2s cubic-bezier(.4,0,.2,1);
   }
 

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

@@ -8,7 +8,7 @@ import Button from "../buttons/Button.svelte";
 import { createEventDispatcher } from "svelte";
 let clazz = {};
 export { clazz as class };
-export let selectedYear = (/* @__PURE__ */ new Date()).getFullYear(), selectedMonth = (/* @__PURE__ */ new Date()).getMonth(), selectedDate = /* @__PURE__ */ new Date(), visibleMonth = selectedMonth, visibleYear = selectedYear, view = "day", locale = "it", selectableYears = [...Array(150).keys()].map(
+export let selectedYear = (/* @__PURE__ */ new Date()).getFullYear(), selectedMonth = (/* @__PURE__ */ new Date()).getMonth(), selectedDate = void 0, visibleMonth = selectedMonth, visibleYear = selectedYear, view = "day", locale = "it", selectableYears = [...Array(150).keys()].map(
   (i) => i + ((/* @__PURE__ */ new Date()).getFullYear() - 75)
 );
 let dispatch = createEventDispatcher();

package/dist/components/simple/dates/TimePicker.css

@@ -0,0 +1,10 @@
+:root {
+  --time-picker-default-primary-color: rgb(var(--global-color-primary-600));
+  --time-picker-default-height: 400px;
+  --time-picker-default-width: 100%;
+  --time-picker-default-header-background-color: rgb(var(--global-color-primary-600));
+  --time-picker-default-header-color: rgb(var(--global-color-grey-50));
+  --time-picker-default-box-shadow: 0 4px 6px -1px rgb(var(--global-color-contrast-300), .1),
+    0 2px 4px -2px rgb(var(--global-color-contrast-300), .1);
+  --time-picker-default-overflow: hidden;
+}

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

@@ -0,0 +1,170 @@
+<script>import "../../../css/main.css";
+import "./TimePicker.css";
+import { DateTime } from "luxon";
+import { createEventDispatcher } from "svelte";
+import Icon from "../media/Icon.svelte";
+let clazz = {};
+export { clazz as class };
+export let selectedTime = void 0, locale = "it-IT";
+let hours = "00";
+let dispatch = createEventDispatcher();
+let buildUpHours = hours;
+function handleHoursInput(e) {
+  setTimeout(() => {
+    let inserted = e.key;
+    if (inserted == "Backspace") {
+      if (Number(buildUpHours) < 10) {
+        buildUpHours = "00";
+      } else {
+        buildUpHours = "0" + (buildUpHours.at(0) || "0");
+      }
+    }
+    if (["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"].includes(inserted)) {
+      if (Number(buildUpHours) < 10) {
+        buildUpHours = `${Number(buildUpHours)}${inserted}`;
+      } else {
+        buildUpHours = `${buildUpHours.at(1)}${inserted}`;
+      }
+    }
+    hours = buildUpHours;
+  }, 10);
+}
+$:
+  hours = buildUpHours;
+$:
+  console.log(hours);
+</script>
+
+<div
+  class="container {clazz.container || ''}"
+>
+  <div
+    class="header {clazz.header || ''}"
+  >
+    <h2>
+      {#if !!selectedTime}
+        {DateTime.fromJSDate(selectedTime).setLocale(locale).toLocaleString(DateTime.TIME_24_SIMPLE)}
+      {/if}
+    </h2>
+  </div>
+  <div class="body">
+    <div class="time-switch">
+      <button 
+        class="icon-button"
+      >
+        <Icon
+          name="mdi-chevron-up"
+          --icon-size="20pt"
+        ></Icon>
+      </button>
+      <input
+        type="text"
+        class="transparent-input"
+        bind:value={hours}
+        on:keydown={handleHoursInput}
+      />
+      <button 
+        class="icon-button"
+      >
+        <Icon
+          name="mdi-chevron-down"
+          --icon-size="20pt"
+        ></Icon>
+      </button>
+    </div>
+    <div>:</div>
+    <input type="text" class="transparent-input" maxlength="2" />
+  </div>
+</div>
+
+<style>
+  .container {
+    border-radius: 5px;
+    height: var(
+      --time-picker-height,
+      var(--time-picker-default-height)
+    );
+    width: var(
+      --time-picker-width,
+      var(--time-picker-default-width)
+    );
+    box-shadow: var(
+      --time-picker-box-shadow,
+      var(--time-picker-default-box-shadow)
+    );
+    overflow: var(
+      --time-picker-overflow,
+      var(--time-picker-default-overflow)
+    );
+    display: flex;
+    flex-direction: column;
+  }
+
+  .header {
+    border-radius: 5px 5px 0 0;
+    background-color: var(
+      --time-picker-header-background-color,
+      var(--time-picker-default-header-background-color)
+    );
+    height: calc(var(--time-picker-height, var(--time-picker-default-height)) / 4);
+    color: var(
+      --time-picker-header-color,
+      var(--time-picker-default-header-color)
+    );
+  }
+
+  .header > h2 {
+    margin-left: 15px;
+    margin-top: 5px;
+    transition: 0.1s;
+    opacity: 0.8;
+  }
+  .header > h2:hover {
+    opacity: 1;
+    cursor: pointer;
+  }
+
+  .body {
+    flex-grow: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 8px
+  }
+
+  .transparent-input {
+    border: 2px solid rgb(var(--global-color-contrast-200));
+    border-radius: 5px;
+    width: 36px;
+    text-align: center;
+    outline: none;
+    background-color: transparent; 
+    padding: 4px 8px;
+    color: rgb(var(--global-color-contrast-900));
+    transition: all .1s cubic-bezier(0.075, 0.82, 0.165, 1);
+    font-size: 24pt;
+    caret-color: transparent;
+  }
+
+  .transparent-input:hover, .transparent-input:focus {
+    border-color: rgb(var(--global-color-primary-500));
+  }
+
+  .time-switch {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    align-items: center;
+  }
+
+  .icon-button {
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    outline: none;
+    color: inherit;
+  }
+
+</style>

package/dist/components/simple/dates/TimePicker.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+import '../../../css/main.css';
+import './TimePicker.css';
+declare const __propDef: {
+    props: {
+        class?: {
+            container?: string | undefined;
+            header?: string | undefined;
+            selectorRow?: string | undefined;
+        } | undefined;
+        selectedTime?: Date | null | undefined;
+        locale?: "it-IT" | "en-EN" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TimePickerProps = typeof __propDef.props;
+export type TimePickerEvents = typeof __propDef.events;
+export type TimePickerSlots = typeof __propDef.slots;
+export default class TimePicker extends SvelteComponentTyped<TimePickerProps, TimePickerEvents, TimePickerSlots> {
+}
+export {};

package/dist/index.d.ts

@@ -9,7 +9,7 @@ export { default as Calendar } from './components/simple/dates/Calendar.svelte';
 export { default as DatePicker } from './components/simple/dates/DatePicker.svelte';
 export { default as MonthSelector } from './components/simple/dates/MonthSelector.svelte';
 export { default as TimePickerTextField } from './components/simple/dates/TimePickerTextField.svelte';
-export { default as DatePickerTextField } from './components/simple/dates/DatePickerTextField.svelte';
+export { default as DatePickerTextField } from './components/composed/forms/DatePickerTextField.svelte';
 export { default as YearSelector } from './components/simple/dates/YearSelector.svelte';
 export { default as Dialog } from './components/simple/dialogs/Dialog.svelte';
 export { default as Autocomplete } from './components/simple/forms/Autocomplete.svelte';

package/dist/index.js

@@ -9,7 +9,7 @@ export { default as Calendar } from './components/simple/dates/Calendar.svelte';
 export { default as DatePicker } from './components/simple/dates/DatePicker.svelte';
 export { default as MonthSelector } from './components/simple/dates/MonthSelector.svelte';
 export { default as TimePickerTextField } from './components/simple/dates/TimePickerTextField.svelte';
-export { default as DatePickerTextField } from './components/simple/dates/DatePickerTextField.svelte';
+export { default as DatePickerTextField } from './components/composed/forms/DatePickerTextField.svelte';
 export { default as YearSelector } from './components/simple/dates/YearSelector.svelte';
 export { default as Dialog } from './components/simple/dialogs/Dialog.svelte';
 export { default as Autocomplete } from './components/simple/forms/Autocomplete.svelte';

package/package.json

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